javascript - 使用 WebKitCSSMatrix 的 rotateAxisAngle 方法，如何有效地将先前的旋转设置为该元素的默认旋转？

Question

我以前没有玩过 WebKitCSSMatrix 属性，所以我决定通过制作一个基于网络的魔方来给自己一个挑战。这是以前做过的事情，但我想我会从头开始尝试(不看任何其他来源)。但是，在旋转每个单独的立方体时，我现在遇到了一些困难。

这是我目前拥有的: JSFiddle 。 (是的，目前这只是一个 2x2 的立方体)。

请注意，轴本身还没有作为一个整体旋转，我现在只关注单个立方体的旋转。

要旋转每一边，您只需单击并拖动即可。因此，例如，如果您单击左上角的红色方 block 并将光标向右拖动，您将逆时针向右旋转顶行的每个立方体。

如您所见，每个轴的每个立方体如果仅以一种方式(或相反的方式)旋转则正确旋转，但是当您组合两个轴时，旋转会困惑。发生这种情况是因为我假设我使用的是 rotateAxisAngle()方法不与之前的旋转叠加。

例如，如果我们捕获正面左上角的红色方 block 并向右拖动，我们最终会得到这样的结果:

这里是 case ('right')旋转已被触发并且rotateAxisAngle(0, 1, 0, 90)已应用。红色立方体已逆时针向右旋转，现在白色面已按要求位于正面。这个红色立方体现在有以下 style :

<div
    class="cube"
    style="
        -webkit-transform: matrix3d( 0,  0, -1,  0,
                                     0,  1,  0,  0,
                                     1,  0,  0,  0,
                                     0,  0,  0,  1 );
"> ... </div>

如果我们现在捕获同一个正方形并将其向下移动，顶部的蓝色面应该在前面。这就是问题所在。在这样做的过程中，我们最终得到了:

立方体不是顺时针向下旋转，而是逆时针向右旋转。矩阵已转换为:

-webkit-transform: matrix3d( 0,  0, -1,  0,
                            -1,  0,  0,  0,
                             0,  1,  0,  0,
                             0,  0,  0,  1 );

所需的矩阵应该是:

-webkit-transform: matrix3d( 0, -1,  0,  0,
                             0,  0, -1,  0,
                             1,  0,  0,  0,
                             0,  0,  0,  1 );

我需要做什么才能将新的旋转堆叠在之前的旋转之上，就像之前的旋转是立方体的默认旋转一样？

Answer 1

问题是，在进行矩阵变换时(在您的例子中是旋转)，您将原始矩阵乘以变换。

而且，当您执行此操作时，您可以在右乘法和左乘法之间进行选择。

不幸的是，rotateAxisAngle 正在执行您想要的相反乘法。

据我所知，无论如何都无法告诉 rotateAxisAngle 改变行为，因此您需要手动完成。

我选择在一个单独的变量中有一个单位矩阵，然后进行旋转，旋转单位矩阵并将结果乘以元素的当前变换。

即:

var identity = new WebKitCSSMatrix();
identity.m11 = 1;
identity.m22 = 1;
identity.m33 = 1;
identity.m44 = 1;

    
$(function() {
    var
        $body = $('body'),
        $wrapper = $('#rubiks > .wrapper'),
        $rubiks = $('#rubiks'),
        spinable = true
    ;
    $.fn.extend({
        spin: function(x,y,z,direction) {
            if(this.selector === '#rubiks') {
                switch(direction) {
                    case ('left'):
                        $('div.axis[data-y="'+y+'"]').each(function() { 
                            var $this = $(this);
                            $cube = $this.find('.cube');
                            transformMatrix = $this.css('transform').split(', ');
                            matrix = new WebKitCSSMatrix($cube[0].style.webkitTransform);
                            transform = identity.rotateAxisAngle(0, 1, 0, -90);
                            matrix = transform.multiply(matrix);
                            $cube[0].style.webkitTransform = matrix.toString();
                        });
                        break;
                    case ('right'):
                        $('div.axis[data-y="'+y+'"]').each(function() {
                            var $this = $(this);
                            $cube = $this.find('.cube');
                            transformMatrix = $this.css('transform').split(', ');
                            matrix = new WebKitCSSMatrix($cube[0].style.webkitTransform);
                            transform = identity.rotateAxisAngle(0, 1, 0, 90);
                            matrix = transform.multiply(matrix);
                            $cube[0].style.webkitTransform = matrix.toString();
                        });
                        break;

我只发布了2个案例，其余的都是一样的。

updated demo