Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

rotate3d shorthand

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

like image 306
Artem Svirskyi Avatar asked Mar 04 '13 17:03

Artem Svirskyi


People also ask

What is 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.

How do you rotate the z-axis in CSS?

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.


1 Answers

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

like image 178
Ana Avatar answered Sep 21 '22 18:09

Ana