Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
626 views
in Technique[技术] by (71.8m points)

css - rotate3d shorthand

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

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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: you may have noticed that the signs of the sin values for the rotateY transform are different than for the other two transforms. It's not a computation mistake. The reason for this is that, for the screen, you have the y-axis pointing down, not up.


So these are the three 4x4 matrices that you need to multiply in order to get the 4x4 matrix for the resulting single rotate3d transform. As I've said, I'm not sure how easy it can be to get the 4 values out, but the 16 elements in the 4x4 matrix are exactly the 16 parameters of the matrix3d equivalent of the chained transform.


EDIT:

Actually, it turns out it's pretty easy... You compute the trace (sum of diagonal elements) of the matrix for the rotate3d matrix.

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

You then compute the trace for the product of the three 4x4 matrices, you equate the result with 2 + 2*cos(α) you extract α. Then you compute x, y, z.

In this particular case, if I computed correctly, the trace of the matrix resulting from the product of the three 4x4 matrices is going to be:

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

So cos(α) = (T - 2)/2 = T/2 - 1, which means that α = acos(T/2 - 1).


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...