Despite, we rotate the element using the rotateX(), rotateY(), and rotateZ() functions, the same effect can be achieved using the matrix() and matrix3d() functions. All we have to do is apply some formulas.
We can calculate rotate() or rotateZ() of a 2D element by using the matrix() function with the formula stated here: transform: matrix(cosθ, sinθ, -sinθ, cosθ, 0, 0); I have kept 0 for both the translateX() and translateY() parameters so that we can see the rotations very clearly.
Video Tutoral at https://youtu.be/Qoz0K5k7lHo
Let’s say we want to calculate rotateZ(35deg). To do that, we have to find out the sine and cosine values outlined in this formula: transform: matrix(cosθ, sinθ, -sinθ, cosθ, 0, 0);
Calculate cosθ and sinθ values by using a calculator. Since our calculation is to get rotateZ(35deg), we can replace all the theta values with 35 as shown here, transform: matrix(cos35, sin35, -sin35, cos35, 0, 0); Now all we have to do is find out cos35 and sin35 as stated here: transform: matrix(0.8191, 0.5735, -0.5735, 0.8191, 0, 0);
You may also represent the rotateZ() 35 degrees, as shown here: transform: matrix3d(0.8191, 0.5735, 0, 0, -0.5735, 0.8191, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); This technique works in a 2D element as well but is not necessarily required to be used this way, as it involves lengthy parameters, primarily intended for 3D elements.
You may also represent the rotateZ() 35 degrees, as shown here: transform: matrix3d(0.8191, 0.5735, 0, 0, -0.5735, 0.8191, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); This technique works in a 2D element as well but is not necessarily required to be used this way, as it involves lengthy parameters, primarily intended for 3D elements.
In short, these formulas are used for calculating rotate() X, Y and Z on a 2D plane:
1. RotateX
transform: matrix(1, 0, 0, cosθ, 0, 0);
2. RotateY
transform: matrix(cosθ, 0, 0, 1, 0, 0);
3. RotateZ
transform: matrix(cosθ, sinθ, -sinθ, cosθ, 0, 0);
The first two formulas will produce the same effects as rotateX() and rotateY() on a 2D plane, but they will not work with a 3D element.
Only the rotateZ formula works with a 3D element.
The matrix() function alone cannot accurately represent the rotateX() and rotateY() transformations. The matrix() function is a 2D transformation function that accepts six values representing a 3x3 matrix. It can handle translation, scaling, skewing, and rotation in the 2D plane, but it does not support 3D rotations around the X or Y axes.
Therefore, you can use these formulas to create the rotations in matrix3d() function:
1. RotateX
transform: matrix(1, 0, 0, 0,
0, cosθ, sinθ, 0,
0, -sinθ, cosθ, 0,
0, 0, 0, 1);
2. RotateY
transform: matrix(cosθ, 0, -sinθ, 0,
0, 1, 0, 0,
sinθ, 0, cosθ, 0,
0, 0, 0, 1);
3. RotateZ
transform: matrix(cosθ, sinθ, 0, 0,
-sinθ, cosθ, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1);
No comments
Post a Comment
If you have any doubt, please let me know.