Example: use matrix3d
The matrix3d() function is an alternative to the three-dimensional
transform functions
rotate3d(), rotateX(), rotateY(), rotateZ(),
translate3d(), translateZ(),
scale3d(), scaleZ(), and perspective().
so you say
.rotated {
transform: matrix3d(0.583333, 0.186887, 0.79044, 0,
-0.52022, 0.833333, 0.186887, 0,
-0.623773, -0.52022, 0.583333, 0,
0, 0, 0, 1);
}
instead of the more intuitive
.rotated {
transform: rotate3d(1,-2,1,60deg);
}
BUT
Any time you do a CSS transform, you're affecting the matrix.
Even if you use another function such as rotate3d(),
you're still affecting the matrix.
The matrix determines the coordinates of the element
— its position, size, orientation, etc.
These are all represented by sixteen number values.
a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, d4 ... linear transformation.
a4, b4, c4 ...translation.
Another option is to use the Window.getComputedStyle() method to
retrieve the computed value of the transform function.
the matrix() function accepts 6 parameters FOR MERE two-dimensional space.