css - rotate3d shorthand

Question

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

Answer 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

where

---

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