无法从一个特定方向旋转到另一个方向

Question

我的例子是一个使用CSS3转换和转换的旋转动画多维数据集.

问题是,在这个jsfiddle的起始位置似乎没有可能的CSS3旋转来显示'4'面(左旋一个).

JSFiddle的基本指令: 'x'键使用CSS3设置立方体样式rotateX:90deg,'y'表示rotateY,'z'表示rotateZ.单击"重置"按钮返回起始位置.注意*无论旋转(x,y或z),我都不能让立方体向左旋转一个位置.

我正在使用CSS3 rotate3d属性rotateX,rotateY并rotateZ使用transition影响该transform属性的CSS3 .

此外,值得一提的是,使用rotateX/Y/Z属性允许立方体在几乎所有其他位置/方向上向上,向左,向右或向下旋转.

问题:

这里有什么问题？这种轮换不可能吗？CSS3旋转有问题,还是我的代码/逻辑中存在问题？

最佳答案将解释CSS3 rotate3d转换如何工作(幕后;数学上).

Answer 1

这里发生的变换是复合变换(因为变换矩阵经历矩阵级联).例如,当您围绕其x轴旋转元素时,其他轴将旋转90度,因此围绕y轴的旋转不再具有它最初所做的右到左效果.相反,它现在表现得像一个倒Z轴.请考虑以下图表:

问题的基础是:当你对一个点应用多个变换时,它们的所有变换矩阵都与点本身相乘,按照应用的顺序从左到右.因此,例如,假设关于x的90度旋转的矩阵是R _x,关于y的90度旋转的矩阵是R _y,关于z的90度旋转的矩阵是R _z.

让我们说我们按了z两次,x一次.现在,对于元素中的任何点P,其新位置P ^'将计算为:

P ^' = R _z ^.R _z ^.R _x ^.P

不幸的是,这个问题是每个后续转换将应用于最后一次计算产生的参考帧.因此,在这种情况下,x轴将在我们围绕它旋转时指向完全相反的方向.

这个问题的解决方案(我将不讨论的数学)是以相反的顺序乘以矩阵.如果这样做,每个连续变换将相对于固定轴,而不是相对于前一个变换离开轴的任何状态.所以我们的计算将如下所示:

P ^' = R _x ^.R _z ^.R _z ^.P

经过WebKitCSSMatrix一段时间的摆弄后,我设法提出了以下解决方案:

// Make a matrix out of the transformation currently in effect
var oldMatrix = new WebKitCSSMatrix(cube[0].style.webkitTransform);

//Make a matrix that applies the new rotation
var extraRotate = (new WebKitCSSMatrix()).rotate(anglex, angley, anglez);

//Multiply them (with the new one on the left)
var final = extraRotate.multiply(oldMatrix);

//I need to extract the elements of the final matrix into an array. 
//They are stored like this: 1st row 1st column in key m11, 2nd row
//1st column in key m12, etc.
var finalstring = [];
for (var i = 1; i < 5; i++) {
    for (var j = 1; j < 5; j++) {
        finalstring.push(Math.round(final['m' + i + j]));
    }
}

//Make a new style rule out of our final matrix and apply it to the element
cube[0].style.webkitTransform = 'matrix3d(' + finalstring.join(',') + ')';

这通过预先将现有的变换矩阵与所需的附加旋转相乘来设法解决旋转参考帧的问题.注意我如何extraRotate首先计算矩阵,然后将其乘以现有的变换,有效地将矩阵与应用程序的逆序相乘:

P ^' = R _new ^.R _老 ^.P

这计算相对于世界坐标的新点矢量,而不是相对于变换后的坐标.

作为奖励,这也消除了对全局变量的需求,因为元素的当前变换矩阵是我们需要的唯一信息.

TL; DR

我在下面列出了一个更新的小提琴.按y将旋转立方体向右旋转90度.

这是一个演示:http://jsfiddle.net/guruB/

(如前,使用z,x并y绕相应的轴)

注意:您可以在此处了解如何计算旋转矩阵.