CSS Transform Functions

The CSS transform functions are the functions we use to translate, rotate, skew, scale, or add perspective effects to an HTML element. Below are the common ones.

📄️ matrix() Function

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

📄️ matrix3d() Function

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

📄️ perspective() Function

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

📄️ rotate() Function

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

📄️ rotate3d() Function

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

📄️ rotateX() Function

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

📄️ rotateY() Function

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

📄️ rotateZ() Function

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

📄️ scale() Function

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

📄️ scale3d() Function

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

📄️ scaleZ() Function

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

📄️ skew() Function

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

📄️ translate() Function

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

📄️ translate3d() Function

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

📄️ translateZ() Function

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