Widely available Supported across all major browsers. Safe to use in production.

2D transforms

The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.

If the property has a value different from none, a stacking context will be created. In that case, the element will act as a containing block for any position: fixed; or position: absolute; elements that it contains.

You can also use the individual transform properties: translate, rotate, and scale. These properties are applied in the order: translate, rotate, scale, and finally transform.

Warning: Only transformable elements can be transformed. That is, all elements whose layout is governed by the CSS box model except for: non-replaced inline boxes, table-column boxes, and table-column-group boxes.

Animation

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
transform
36
12
16
9
36
9
Other
css.properties.transform-origin

The transform-origin CSS property sets the origin for an element's transformations.
36
12
16
9
36
9
CSS property
bottom
1
12
3.5
2
18
1
center
1
12
3.5
2
18
1
left
1
12
3.5
2
18
1
right
1
12
3.5
2
18
1
three value syntax

Three-value syntax
12
12
10
5
18
3.2
top
1
12
3.5
2
18
1
none
1
12
3.5
3.1
18
3.2
Other
css.types.angle

The CSS data type represents an angle value expressed in degrees, gradians, radians, or turns. It is used, for example, in gradients and in some transform functions.
2
12
3.6
4
18
3.2
css.types.angle-percentage

The CSS data type represents a value that can be either an angle or a percentage.
2
12
3.6
4
18
3.2
CSS type
deg
2
12
3.6
4
18
3.2
grad
2
12
3.6
4
18
3.2
rad
2
12
3.6
4
18
3.2
turn
2
12
13
4
18
3.2
Other
css.types.position

The CSS data type denotes a two-dimensional coordinate used to set a location relative to an element box. It is used in the background-position, object-position, mask-position offset-position, offset-anchor and transform-origin properties.
1
12
1
1
18
1
CSS type
four value syntax

Four-value syntax for offset from any edge
25
12
13
7
25
7
keyword value syntax

Syntax combining a keyword and `<length>` or `<percentage>`
1
12
1
1
18
1
Other
css.types.transform-function

The CSS data type represents a transformation that affects an element's appearance. Transformation functions can rotate, resize, distort, or move an element in 2D or 3D space. It is used in the transform property.
1
12
3.5
3.1
18
3.2
CSS type
matrix

The matrix() CSS function defines a homogeneous 2D transformation matrix. Its result is a &lt;transform-function&gt; data type.
1
12
3.5
3.1
18
3.2
rotate

The rotate() CSS function defines a transformation that rotates an element around a fixed point on the 2D plane, without deforming it. Its result is a &lt;transform-function&gt; data type.
1
12
3.5
3.1
18
3.2
scale

The scale() CSS function defines a transformation that resizes an element on the 2D plane. Because the amount of scaling is defined by a vector [sx, sy], it can resize the horizontal and vertical dimensions at different scales. Its result is a &lt;transform-function&gt; data type.
1
12
3.5
3.1
18
3.2
scaleX

The scaleX() CSS function defines a transformation that resizes an element along the x-axis (horizontally). Its result is a &lt;transform-function&gt; data type.
1
12
3.5
3.1
18
3.2
scaleY

The scaleY() CSS function defines a transformation that resizes an element along the y-axis (vertically). Its result is a &lt;transform-function&gt; data type.
1
12
3.5
3.1
18
3.2
skew

The skew() CSS function defines a transformation that skews an element on the 2D plane. Its result is a &lt;transform-function&gt; data type.
1
12
3.5
3.1
18
3.2
skewX

The skewX() CSS function defines a transformation that skews an element in the horizontal direction on the 2D plane. Its result is a &lt;transform-function&gt; data type.
1
12
3.5
3.1
18
3.2
skewY

The skewY() CSS function defines a transformation that skews an element in the vertical direction on the 2D plane. Its result is a &lt;transform-function&gt; data type.
1
12
3.5
3.1
18
3.2
translate

The translate() CSS function repositions an element in the horizontal and/or vertical directions. Its result is a &lt;transform-function&gt; data type.
1
12
3.5
3.1
18
3.2
translateX

The translateX() CSS function repositions an element horizontally on the 2D plane. Its result is a &lt;transform-function&gt; data type.
1
12
3.5
3.1
18
3.2
translateY

The translateY() CSS function repositions an element vertically on the 2D plane. Its result is a &lt;transform-function&gt; data type.
1
12
3.5
3.1
18
3.2
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (1)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (12)
Notes 2 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (49)
  • Available with a vendor prefix: -moz- (3.5)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (3.1)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (18)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (3.2)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (1)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (12)
Notes 2 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (49)
  • Available with a vendor prefix: -moz- (3.5)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (2)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (18)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (1)
Notes 1 item(s)
Implementation note
  • Before Firefox 16, the translation values of `matrix()` could be `<length>`s, in addition to the standard `<number>`.
Notes 1 item(s)
Removed
  • Firefox 14 removed experimental support for `skew()`, but it was reintroduced in Firefox 15.

Syntax

CSS 
.rotate { transform: rotate(45deg); }
.scale { transform: scale(1.5); }
.move { transform: translate(50px, 20px); }
.combined { transform: rotate(10deg) scale(1.2); }

Live demo

Rotate Rotate

CSS Rotate rotate demo.

PreviewFullscreen

Scale Scale

CSS Scale scale demo.

PreviewFullscreen

Skew Skew + Move

CSS Skew skew + move demo.

PreviewFullscreen

Use cases

  • Using 2D transforms

    The transform CSS property lets you rotate, scale, skew, or translate an element.

Cautions

  • May not be supported in older browsers.

Accessibility

  • Make sure visual changes are conveyed appropriately to assistive technology.

Related links