Javascript 使用WebKitcsMatrix'；s rotateAxisAngle方法，如何有效地将上一个旋转设置为该元素的默认旋转？

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

以下是我目前拥有的：。（是的，目前这只是一个2x2的立方体）

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

要旋转每一侧，只需单击并拖动即可。例如，如果你点击左上角的红色方块并向右拖动光标，你将逆时针向右旋转每一排立方体

正如您所看到的，如果仅以一种方式（或相反的方式）旋转，则每个轴的每个立方体都会正确旋转，但当您组合两个轴时，旋转会出错。之所以发生这种情况，是因为我假设我使用的

rotateAxisAngle（）

方法没有与上一次旋转叠加

例如，如果我们抓住正面左上角的红色方块并向右拖动，我们将得到以下结果：

此处已触发

案例（“右”）

旋转，并应用了

旋转轴角度（0,1,0,90）

。红色立方体已向右逆时针旋转，现在白色面位于所需的正面。此红色立方体现在具有以下

样式

：

。。。

如果我们现在抓住同一个正方形并向下移动，顶部的蓝色面应该在前面。这就是问题所在。在这样做的过程中，我们最终得出以下结论：

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

-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 );

---

如果上一个旋转是立方体的默认旋转，我需要做什么才能在上一个旋转的基础上叠加新的旋转？

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

当你这样做的时候，你可以选择右乘法和左乘法

不幸的是，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个案例，其余的都是一样的

---

我的答案被删除了，所以我无法改进

我发现，使用Chrome（也许还有其他浏览器）的getComputedStyle方法可以让您在一组对象上进行局部或全局旋转。（见下文：不是完整的代码，而是它的要点（小提琴中的完整代码）

关于确切的问题-有两种方法可以将转换添加到当前转换值，我在下面概述了它们：

假设你的对象是魔方。围绕y轴的全局旋转意味着魔方围绕与你的体长向量（或你自己的体长向量）平行的轴旋转。围绕y轴的局部旋转意味着魔方围绕标记为“原始y”的一侧的任何向量旋转。换句话说，如果定义立方体时，红色中心面朝上，则可以沿任意方向移动立方体，并且局部y轴旋转不会改变红色中心正方形的方向

<div id="someForm">
  ...any number of 3d transformed objects...
</div>

---

非常感谢！当旋转达到360度时，我能做些什么来纠正旋转？例如，如果你抓住正面的左上角立方体，将其向左旋转，然后向下旋转两次，造成了不想要的效果。我无法重现你的问题。可能是我不完全理解，或者可能是导航器rela泰德。我在Win 7上使用Chrome 29.0.1547.76 m。我使用的是相同版本的Chrome和相同的操作系统。复制：1.单击左上方的红色方块。2.向左拖动。3.单击红色方块所在的黑色方块。4.向下拖动。5.单击蓝色方块，该方块现在位于其位置。6.再次向下拖动，这次观看动画这个立方体和它后面的顶部白色立方体的变形。我已经找到了为什么我看不到这个问题。在flags中，我设置了“禁用线程动画”。这解决了问题。但是，如果我回到标准配置，问题会再次出现。看起来像是Chrome中的一个bug。哦，我明白了。非常感谢所有的帮助！：）

.someForm{
      transform: someTransform();
      webkit-transform-origin: 50% 50%;
      moz-transform-origin: 50% 50%;
      o-transform-origin: 50% 50%;
      transform-origin: 50% 50%;

      webkit-transform-style: preserve-3d;
      moz-transform-style: preserve-3d;
      o-transform-style: preserve-3d;
      transform-style: preserve-3d;
}

var someForm = document.getElementById('someForm');
function rotateAroundAxis(axis,angle,coordSys){  
   //axis in ['X','Y','Z'];
   //angle is numeric;
   //coordSys in ['local','global']
   var oldTransform = window.getComputedStyle(someForm).transform;
       oldTransform = oldTransform!='none' ? oldTransform : ''; 
   var newTransform = ' rotate' + axis + '('+angle+'deg) ';
   var totalTransform;
   if(coordSys==='global'){
        totalTransform = oldTransform + newTransform;
   }else{ // coordSys==='local'
        totalTransform = newTransform + oldTransform+;
   }
   someForm.style.transform = totalTransform;
}