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

Question

我的示例是一个使用 CSS3 变换和过渡的旋转动画立方体。

问题是从 this jsfiddle 的起始位置开始似乎不可能进行 CSS3 旋转 显示“4”面(向左旋转一圈)。

JSFiddle 的基本说明:“x”键使用 CSS3 rotateX:90deg 设置立方体样式，“y”代表 rotateY，“z”代表 rotateZ。单击“重置”按钮返回到起始位置。 注意*无论怎样旋转(x、y 或 z)，我都无法让立方体向左旋转一个位置。

我正在使用 CSS3 rotate3d 属性 rotateX、rotateY 和 rotateZ，CSS3 transition 影响transform 属性。

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

问题:

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

最好的答案是解释 CSS3 rotate3d 转换是如何工作的(在幕后；数学上)。

Answer 1

此处发生的变换是复合变换(因为变换矩阵经过矩阵串联)。例如，当您围绕其 x 轴旋转元素时，其他轴将旋转 90 度，因此围绕 y 轴的旋转不再像最初那样具有从右到左的效果。相反，它现在表现得像一个倒置的 z 轴。考虑下图:

问题背后的数学原理是这样的:当您对一个点应用多个变换时，它们的所有变换矩阵都会与该点本身相乘，按应用顺序从左到右。例如，让我们假设关于 x 旋转 90 度的矩阵是 R_x，关于 y 旋转 90 度的矩阵是 R_y 并且旋转 90 度的矩阵关于 z 是 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_old ^. P

这将计算相对于世界坐标而不是相对于转换后坐标的新点向量。

作为奖励，这也避免了对全局变量的需要，因为元素的当前转换矩阵是我们需要的唯一信息。

长话短说

我在下面包含了一个更新的 fiddle 。按 y 将立方体向右旋转 90 度。

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

(和之前一样，使用z、x和y绕相应的轴旋转)

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