How to combine rotateX(50deg) rotateY(20deg) rotateZ(15deg)
in shorthand rotate3d()
?
The rotate3d() CSS function defines a transformation that rotates an element around a fixed axis in 3D space, without deforming it. Its result is a <transform-function> data type.
rotateZ() The rotateZ() CSS function defines a transformation that rotates an element around the z-axis without deforming it. Its result is a <transform-function> data type.
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)
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With