The Maths
Mathy Cheat Sheets
The Identity Matrix
|
x |
y |
z |
W |
| X |
1, |
0, |
0, |
0, |
| Y |
0, |
1, |
0, |
0, |
| Z |
0, |
0, |
1, |
0, |
| T |
0, |
0, |
0, |
1 |
If you multiply another matrix by this one, you get...the same matrix you started with (like multiplying a number by 1). Not very exciting, but this is plain vanilla Matrix 3D. You want toppings? Scroll down.
CSS Transform Properties in a 3D Matrix
(sin = sine; cos = cosine; rad = radians; 6.28rad in 360deg, 1 rad = 57.3deg; ratio is the top number of a fraction, with 1 as the bottom)
|
x |
y |
z |
W |
| X |
scaleX(*), |
skewY(rad), |
0, |
0, |
| Y |
skewX(rad), |
scaleY(*), |
0, |
0, |
| Z |
0, |
0, |
scaleZ(*), |
0, |
| T |
translateX(px), |
translateY(px), |
translateZ(px), |
scale(ratio) |
RotateX
|
x |
y |
z |
W |
| X |
1, |
0, |
0, |
0, |
| Y |
0, |
cos(rad), |
sin(rad), |
0, |
| Z |
0, |
-sin(rad), |
cos(rad), |
0, |
| T |
0, |
0, |
0, |
1 |
RotateY
|
x |
y |
z |
W |
| X |
cos(rad), |
0, |
sin(rad), |
0, |
| Y |
0, |
1, |
0, |
0, |
| Z |
-sin(rad), |
0, |
cos(rad), |
0, |
| T |
0, |
0, |
0, |
1 |
RotateZ
|
x |
y |
z |
W |
| X |
cos(rad), |
sin(rad), |
0, |
0, |
| Y |
-sin(rad), |
cos(rad), |
0, |
0, |
| Z |
0, |
0, |
1, |
0, |
| T |
0, |
0, |
0, |
1 |
Some Comments on Rotation
You might compare each rotation matrix above (RotateX, RotateY, and RotateZ), and see that to rotate along a specific axis, X for instance, you change the other 2 axes in the columns and rows in which x or X does not occur to the four values: cos(rad), sin(rad), and then -sin(rad), cos(rad). Everything else remains an identity matrix with 1's only in xX, yY, zZ, and WT ("WT" stands for "What the ???") and 0's everywhere else—I guess those 1's are the cool kids with the perfect genetic sequence, and everybody else is a zero. You provide the same rad (radian) value to each sin() or cos() in every non x-ified column and row that is not a W or T (again, what the?), and you get a swivel in three dimensions around X's origin point, which by default is in the center of a box vertically and horizontally. The Y in the RotateX provides the height uppey-downeyness, and the z provides the perspective inducing closey-fareyness. So you provide the rad, CSS provides the awesome!.
If you want to do more than one rotation at a time (i.e., swivel in multiple dimensions), just multiply values that overlap, and Viola! or Voila?