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:

2D rotate

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:

<img src="transform_translate.gif" alt="Translate">

Example

div {

  transform: translate(50px, 100px);

}

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:

<img src="transform_rotate.gif" alt="Rotate">

Example

div {

  transform: rotate(20deg);

}

Using negative values will rotate the element counter-clockwise.

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

Example

div {

  transform: rotate(-20deg);

}

CSS Transform Properties

The following table lists all the 2D transform properties:

CSS 2D Transform Functions