transform: rotate

Is used to rotate elements.

Compatibility

-webkit-transform: rotate Safari 5+, Chrome 10+ iOS 3.2+ Android 2.1+ Blackberry 7+
-ms-transform: rotate Internet Exlorer 9+
transform: rotate Firefox 16+ Inernet Explorer 10+ Opera 12.1+ IE Mobile 10+

Not supported by Opera Mini. For detailed compatibility info see caniuse.com.

Firefox 16+Safari 5+, Chrome 10+Internet Explorer 9+Internet Explorer 10+Opera 12.1+
iOS 3.2+Android 2.1+Blackberry 7+IE Mobile 10+

General description

The origin of the rotation is at the center of the element. To change the origin see transform-origin. Multiple transformations can be combined.

transform: rotate(1 30deg)

1 The element is rotated clockwise by 30 degrees. Negative values result in a counter clockwise rotation.

Example

Element rotated counter clockwise

transform: rotate(1 -40deg)

1 The element is rotated counter clockwise by 40 degrees.

Further reading

For more info see the W3C site, the Safari site and the site at MDN (including compatibility info for older browser versions).

transform: scale

Is used to scale elements.

Compatibility

-webkit-transform: scale Safari 5+, Chrome 10+ iOS 3.2+ Android 2.1+ Blackberry 7+
-ms-transform: scale Internet Exlorer 9+
transform: scale Firefox 16+ Firefox 16+ Opera 12.1+ IE Mobile 10+

Not supported by Opera Mini. For detailed compatibility info see caniuse.com.

Firefox 16+Safari 5+, Chrome 10+Internet Explorer 9+Internet Explorer 10+Opera 12.1+
iOS 3.2+Android 2.1+Blackberry 7+IE Mobile 10+

General description

Combined notation

The origin of the transformation is at the center of the element. To change the origin see transform-origin. Multiple transformations can be combined.

transform: scale(1 2, 2 1.5)

  1. The scale factor, where 1 stands for the original size, 2 for twice the size, and so on. The element is both scaled horizontally (x-axis) and vertically (y-axis) by the same factor. Negative values mirror the element.
  2. Optional. The vertical scale factor. If given the factor noted at 1 stands for the horizontal change. In this case the element gets scaled by the factor 2 horizontally and 1.5 vertically.

Horizontal scale

transform: scaleX(1 2)

1 The horizontal scale factor.

Vertical scale

transform: scaleY(1 1.5)

1 The vertical scale factor.

Further reading

For more info see the W3C site, the Safari site and the site at MDN (including compatibility info for older browser versions).

transform: skew

Is used to tilt elements.

Compatibility

-webkit-transform: skew Safari 5+, Chrome 10+ iOS 3.2+ Android 2.1+ Blackberry 7+
-ms-transform: skew Internet Exlorer 9+
transform: skew Firefox 16+ Firefox 16+ Opera 12.1+ IE Mobile 10+

Not supported by Opera Mini. For detailed compatibility info see caniuse.com.

Firefox 16+Safari 5+, Chrome 10+Internet Explorer 9+Internet Explorer 10+Opera 12.1+
iOS 3.2+Android 2.1+Blackberry 7+IE Mobile 10+

General description

Combined notation

The origin of the transformation is at the center of the element. To change the origin see transform-origin. Multiple transformations can be combined.

transform: skew(1 30deg, 2 10deg)

  1. The element is tilted around the x-axis (horizontally) by 30 degrees. Positive values represent a tilt to left, negative values tilt the element to the right.
  2. Optional. The angle for the tilt around the y-axis (vertical). If given the value at 1 represents the angle for a tilt around the x-axis. Positive values tilt the element downwards, negative values represent a tilt to the top. In this case the element gets tilted by 30 degrees horizontally (to the left) and 10 degrees vertically (downwards).

Horizontal skew

transform: skewX(1 30deg)

1 The angle for the tilt around the x-axis (horizontal).

Vertical skew

transform: skewY(1 10deg)

1 The angle for the tilt around the y-axis (vertical).

Further reading

For more info see the W3C site, the Safari site and the site at MDN (including compatibility info for older browser versions).

transform: translate

Is used to move elements. Can also be achived by setting the margin or by positioning the element although translate is the better choice for animating elements.

Compatibility

-webkit-transform: translate Safari 5+, Chrome 10+ iOS 3.2+ Android 2.1+ Blackberry 7+
-ms-transform: translate Internet Exlorer 9+
transform: translate Firefox 16+ Firefox 16+ Opera 12.1+ IE Mobile 10+

Not supported by Opera Mini. For detailed compatibility info see caniuse.com.

Firefox 16+Safari 5+, Chrome 10+Internet Explorer 9+Internet Explorer 10+Opera 12.1+
iOS 3.2+Android 2.1+Blackberry 7+IE Mobile 10+

General description

Combined notation

The origin of the transformation is at the center of the element. To change the origin see transform-origin. Multiple transformations can be combined.

transform: translate(1 100px, 2 20px)

  1. The element is moved 100px to the right. Negative values represent a shift to the left.
  2. Optional. The vertical shift. If given the value at 1 stands for the horizontal movement. Positive values move the elements downwards, negative values shift it upwards. In this case the element is moved 100px to the right and 20px down.

Horizontal translate

transform: translateX(1 100px)

1 The value for the horizontal shift.

Vertical translate

transform: translateY(1 20px)

1 The value for the vertical shift.

Example

Multiple transformations combined

transform: rotate(1 33deg) scale(2 1.5)

  1. The element is rotated clockwise by 33 degrees.
  2. It is also enlarged 1.5 times simultaneously (no comma prefixed!).

Further reading

For more info see the W3C site, the Safari site and the site at MDN (including compatibility info for older browser versions).

transform-origin

Sets the origin for transformations of an element.

Compatibility

-webkit-transform-origin Safari 5+, Chrome 10+ iOS 3.2+ Android 2.1+ Blackberry 7+
-ms-transform-origin Internet Exlorer 9+
transform-origin Firefox 16+ Firefox 16+ Opera 12.1+ IE Mobile 10+

Not supported by Opera Mini. For detailed compatibility info see caniuse.com.

Firefox 16+Safari 5+, Chrome 10+Internet Explorer 9+Internet Explorer 10+Opera 12.1+
iOS 3.2+Android 2.1+Blackberry 7+IE Mobile 10+

General description

transform-origin: 1 left 2 top

  1. The horizontal position of the origin for transformations (x-axis). May also be a percentage value where 0% stands for left, 50% for center and 100% for right. Between values are possible as well as length values with the reference point at the top left corner. Negative values are possible in each case. By default the origin of the transformation is both horizontally and vertically at the center of the element (50% 50%).
  2. Optional. The vertical position of the origin. 0% stands for top, 100% for right. The rest from 1 also applies here.

Example

One value set

transform-origin: 1 right

1 The origin for transformations is horizontally set to the right side and vertically centered (50%).

Two percentage values set

transform-origin: 1 25% 2 75%

  1. The origin at the x-axis (horizontally) is 25% from the left.
  2. The origin for the y-axis (horizontally) is 75% from above.

Further reading

For more info see the W3C site, the Safari site and the site at MDN (including compatibility info for older browser versions).