Page Title

Matrix Math in CSS

CSS provides a function matrix3d in the transform property that allows you to create any transform with a 4×4 matrix. Actually, all transforms in CSS are done with matrix math. Try to play with the values in the textarea to see what happens. You can do all 3d rotation, translation, perspective, scaling, etc using a matrix. Try

0.707,-0.707,0,0,
0.707,0.707,0,0,
0,0,1,0,
0,0,0,1
for rotateZ(45deg).

Try

1,0,0,0,
0,1,0,0,
0,0,1,0,
100,100,0,1
for translateX(100px) translateY(100px).

Try

0.5,0,0,0,
0,0.5,0,0,
0,0,1,0,
0,0,0,1
for scaleX(0.5) scaleY(0.5).

CSS IS SUPERPOWERFUL

CSS Matrix Transforms