Matrix CSS
Matrix CSS Compatibility
Matrix is mostly compatible with CSS.
Each CSS transform function can be represented in a 4x4 or 3x2 matrix.
Matrix extends every [Numerics.Matrix4x4] and [Numerics.Matrix3x2] matrix with a .CSS property.
We can embed matrices in any css file or html file by simply outputting that property:
(rotateX 45deg).CSS
This capability is quite useful.
It means we can transform objects in 2D or 3D the exact same way we would in CSS.
The rest of this page proves the point.
It shows a side-by-side comparison of pure CSS and the matrix operation.
Each side should be identical.
Cube
2D
rotate(30deg)
rotate(30deg)
skewX(30deg)
skewX(30deg)
skewY(30deg)
skewY(30deg)
skew(30deg, 15deg)
skew(30deg, 15deg)
skew(15deg, 30deg)
skew(15deg, 30deg)
scale(1,1.5)
scale(1,1.5)
scale(1.5,1)
scale(1.5,1)
translate(-5px, 10px)
translate(-5px, 10px)
3D
rotateX(45deg)
rotateX(45deg)
rotateY(45deg)
rotateY(45deg)
rotateZ(45deg)
rotateZ(45deg)
rotate3d(1,1,1, 45deg)
rotate3d(1,1,1, 45deg)
scaleX(1.5)
scaleX(1.5)
scaleY(1.5)
scaleY(1.5)
scaleZ(1.5)
scaleZ(1.5)
scale3D(1.5, 0.75, 0.5)
scale3D(1.5, 0.75, 0.5)
translateX(10px)
translateX(10px)
translateY(10px)
translateY(10px)
translateZ(-20px)
translateZ(-20px)
translate3d(10px, 20px, 30px)
translate3d(10px, 20px, 30px)