CSS 2D Transforms

CSS 2D Transforms

The CSS transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, and skew elements.

Mouse over the element below to see a 2D transformation:

CSS 2D Transforms Functions

With the CSS transform property you can use the following 2D transformation functions:

• translate()
• rotate()
• scaleX()
• scaleY()
• scale()
• skewX()
• skewY()
• skew()
• matrix()

The CSS translate() Function

The translate() function moves an element from its current position (according to the parameters given for the X-axis and the Y-axis).

The following example moves the <div> element 50 pixels to the right, and 100 pixels down from its current position:

The CSS rotate() Function

The rotate() function rotates an element clockwise or counter-clockwise according to a given degree.

The following example rotates the <div> element clockwise with 20 degrees:

Using negative values will rotate the element counter-clockwise.

The following example rotates the <div> element counter-clockwise with 20 degrees:

Transform Subpages

Continue learning about CSS 2D transforms:

• Scale Functions - scale(), scaleX(), scaleY()
• Skew and Matrix - skew(), skewX(), skewY(), matrix()

CSS Transform Properties

The following table lists all the 2D transform properties:

CSS 2D Transform Functions