css – rotate3d速记

rotateX(50deg)等价于rotate3d(1,50deg)

rotateY(20deg)相当于rotate3d(0，1，0，20deg)

rotateZ(15deg)等效于rotate3d(0，0，1，15deg)

所以…

rotateX(50deg)rotationY(20deg)rotateZ(15deg)

相当于

rotate3d(1,50deg)rotate3d(0，1，0，20deg)rotate3d(0，0，1，15deg)

对于一个通用的rotate3d(x，y，z，α)，你有矩阵

哪里

现在，您可以为3个rotate3d变换中的每一个获取矩阵，并将它们相乘。并且结果矩阵是对应于所得到的单个rotate3d的矩阵。不知道如何轻松地提取rotate3d的值，但它确定很容易提取一个单一matrix3d的值。

在第一种情况下(rotateX(50deg)或rotate3d(1,50deg))，你有：

x = 1，y = 0，z = 0，α= 50deg

因此，在这种情况下矩阵的第一行是1 0 0 0。

第二个是0cos(50deg)-sin(50deg)0。

第三个0 sin(50deg)cos(50deg)0。

第四个显然是0 0 0 1。

在第二种情况下，你有x = 0，y = 1，z = 0，α= 20deg。

第一行：cos(20deg)0 sin(20deg)0。

第二行：0 1 0 0。

第三行：-sin(20)0 cos(20deg)0。

第四：0 0 0 1

在第三种情况下，你有x = 0，y = 0，z = 1，α= 15deg。

第一行：cos(15deg)-sin(15deg)0 0。

第二行sin(15deg)cos(15deg)0 0。

第三和第四行分别是0 0 1 0和0 0 0 1。

注意：您可能已经注意到，用于rotateY变换的sin值的符号不同于用于其他两个变换的sin值的符号。这不是计算错误。这样做的原因是，对于屏幕，你有y轴指向下，不向上。

因此，这些是需要乘以以获得4×4矩阵为所得单个rotate3d变换的三个4×4矩阵。正如我所说，我不知道如何容易得到4个值，但是4×4矩阵中的16个元素恰好是matrix3d等价于链接变换的16个参数。

编辑：

实际上，它很容易…你计算矩阵的矩阵的trace(对角线元素的总和)为rotate3d矩阵。

4-2 * 2 *(1-cos(α))/ 2 = 4-2 *(1-cos(α))= 2 2 * cos

然后，计算三个4×4矩阵的乘积的轨迹，将结果等同于提取α的2 2 * cos(α)。然后计算x，y，z。

在这种特殊情况下，如果我正确计算，从三个4×4矩阵的乘积产生的矩阵的轨迹将是：

T = 
cos(20deg)*cos(15deg) + 
cos(50deg)*cos(15deg) - sin(50deg)*sin(20deg)*cos(15deg) + 
cos(50deg)*cos(20deg) + 
1

因此cos(α)=(T-2)/ 2 = T / 2-1，这意味着α= acos(T / 2-1)。