Home > Abakada: Back to Basics > Language References > CSS Properties > Transform Functions

---

CSS transforms provide functions for modifying the coordinate space of the CSS visual formatting model, allowing authors to move, scale, rotate, and skew elements on a web page.

Property	Description
matrix	Defines a 2D transformation matrix.
matrix3d	Defines a 3D transformation matrix.
perspective	Sets the distance between the user and the z=0 plane.
rotate	Enables rotation of an element.
rotate3d	Rotates an element around a fixed axis in 3D space.
rotateX	Rotates an element around its horizontal axis.
rotateY	Rotates an element around its vertical axis.
rotateZ	Rotates an element around its Z-axis.
scale	Changes the size of an element.
scale3d	Scales an element up or down in 3D space.
scaleX	Increases or decreases the width of an element.
scaleY	Increases or decreases the height of an element.
scaleZ	Scales an element up or down along the z-axis.
skew	Skews an element along the X and Y axis.
skewX	Skews an element in the horizontal direction.
skewY	Skews an element in the vertical direction.
translate	Enables changing the position of an element.
translate3d	Moves an element in 3D space.
translateX	Moves an element horizontally.
translateY	Moves an element vertically.
translateZ	Moves an element along the z-axis.

The following example demonstrates use of the various transform functions.

 Show me 

This section assumes you already have some familiarity with the basics of CSS transforms. If not, I suggest starting with a brief overview on Understanding and Using CSS Transforms.

External reference: CSS Transforms Module Level 2.

CSS Animation Properties, CSS Filter Functions, CSS Transition Properties