一尘不染

rotation3d速记

css

How to combine rotateX(50deg) rotateY(20deg) rotateZ(15deg) in shorthand
rotate3d()?


阅读 304

收藏
2020-05-16

共1个答案

一尘不染

rotateX(50deg) is equivalent to rotate3d(1, 0, 0, 50deg)

rotateY(20deg) is equivalent to rotate3d(0, 1, 0, 20deg)

rotateZ(15deg) is equivalent to rotate3d(0, 0, 1, 15deg)

So…

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

is equivalent to

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


For a generic rotate3d(x, y, z, α), you have the matrix

generic rotate matrix

where

explanation


You now get the matrices for each of the 3 rotate3d transforms and you
multiply them. And the resulting matrix is the matrix corresponding to the
resulting single rotate3d. Not sure how to easy it is to extract the values
for rotate3d out of it, but it’s sure easy to extract those for a single
matrix3d.


In the first case (rotateX(50deg) or rotate3d(1, 0, 0, 50deg)), you have:

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

So the first row of the matrix in this case is 1 0 0 0.

The second one is 0 cos(50deg) -sin(50deg) 0.

The third one 0 sin(50deg) cos(50deg) 0.

And the fourth one is obviously 0 0 0 1.


In the second case, you have x = 0, y = 1, z = 0, α = 20deg.

First row: cos(20deg) 0 sin(20deg) 0.

Second row: 0 1 0 0.

Third row: -sin(20) 0 cos(20deg) 0.

Fourth: 0 0 0 1


In the third case, you have x = 0, y = 0, z = 1, α = 15deg.

First row: cos(15deg) -sin(15deg) 0 0.

Second row sin(15deg) cos(15deg) 0 0.

And the third and the fourth row are 0 0 1 0 and 0 0 0 1 respectively.


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

因此,这是4x4您需要相乘的三个矩阵,以获得4x4用于得到的单个rotate3d变换的矩阵。就像我说过的那样,我不确定取出4个值有多么容易,但是4x4矩阵中的16个元素恰好是matrix3d等效于链式变换的16个参数。


EDIT :

实际上,事实证明这很容易…您可以为rotate3d矩阵计算矩阵的迹线(对角元素的总和)

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

然后,您可以计算这三个4x4矩阵的乘积的轨迹,并将结果与2 + 2*cos(α)extract 相等α。然后你计算x,y,z。

在这种情况下,如果我计算正确,则由这三个4x4矩阵的乘积得到的矩阵的轨迹将是:

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

2020-05-16