CSS Transform Functions

📄️ matrix() Function

The CSS matrix() function is a shorthand for defining 2D transformations.

The CSS matrix3d() function is a shorthand for defining 3D transformations.

perspective() transforms an element by adding some perspective effects to it.

rotate() transforms an element by rotating it two-dimensionally around a fixed point.

rotate3d() transforms an element by rotating it three-dimensionally around the x-, y-, and z-axis.

rotateX() transforms an element by rotating it three-dimensionally around the X-axis.

rotateY() transforms an element by rotating it three-dimensionally around the Y-axis.

rotateZ() transforms an element by rotating it three-dimensionally around the Z-axis.

scale() transforms an element by resizing (scaling) it two-dimensionally from a fixed point.

scale3d() transforms an element by resizing (scaling) it three-dimensionally from a fixed point along the x-, y-, and z-axis.

scaleZ() transforms an element by resizing (scaling) it three-dimensionally from a fixed point along the z-axis.

skew() transforms an element by slanting (skewing) it two-dimensionally around a fixed point.

translate() transforms an element by repositioning (translating) it two-dimensionally.

translate3d() transforms an element by repositioning (translating) it three-dimensionally along the x-, y-, and z-axis.

translateZ() transforms an element by repositioning (translating) it three-dimensionally along the z-axis.