2D transforms
The transform CSS property and its 2D transform functions allow rotating, scaling, skewing, and translating an element. Arbitrary 2D transforms are also possible using a transformation matrix.
Overview
The transform CSS property and its 2D transform functions allow rotating, scaling, skewing, and translating an element. Arbitrary 2D transforms are also possible using a transformation matrix.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 36 | 12 | 16 | 9 | 36 | 9 | |
| Other | ||||||
| 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 | ||||||
| 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 |
| 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 | ||||||
| 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 | ||||||
| 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 | ||||||
| The matrix() CSS function defines a homogeneous 2D transformation matrix. Its result is a <transform-function> data type. | 1 | 12 | 3.5 | 3.1 | 18 | 3.2 |
| 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 <transform-function> data type. | 1 | 12 | 3.5 | 3.1 | 18 | 3.2 |
| 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 <transform-function> data type. | 1 | 12 | 3.5 | 3.1 | 18 | 3.2 |
| The scaleX() CSS function defines a transformation that resizes an element along the x-axis (horizontally). Its result is a <transform-function> data type. | 1 | 12 | 3.5 | 3.1 | 18 | 3.2 |
| The scaleY() CSS function defines a transformation that resizes an element along the y-axis (vertically). Its result is a <transform-function> data type. | 1 | 12 | 3.5 | 3.1 | 18 | 3.2 |
| The skew() CSS function defines a transformation that skews an element on the 2D plane. Its result is a <transform-function> data type. | 1 | 12 | 3.5 | 3.1 | 18 | 3.2 |
| The skewX() CSS function defines a transformation that skews an element in the horizontal direction on the 2D plane. Its result is a <transform-function> data type. | 1 | 12 | 3.5 | 3.1 | 18 | 3.2 |
| The skewY() CSS function defines a transformation that skews an element in the vertical direction on the 2D plane. Its result is a <transform-function> data type. | 1 | 12 | 3.5 | 3.1 | 18 | 3.2 |
| The translate() CSS function repositions an element in the horizontal and/or vertical directions. Its result is a <transform-function> data type. | 1 | 12 | 3.5 | 3.1 | 18 | 3.2 |
| The translateX() CSS function repositions an element horizontally on the 2D plane. Its result is a <transform-function> data type. | 1 | 12 | 3.5 | 3.1 | 18 | 3.2 |
| The translateY() CSS function repositions an element vertically on the 2D plane. Its result is a <transform-function> data type. | 1 | 12 | 3.5 | 3.1 | 18 | 3.2 |
- Available with a vendor prefix: -webkit- (1)
- Available with a vendor prefix: -webkit- (12)
- Available with a vendor prefix: -webkit- (49)
- Available with a vendor prefix: -moz- (3.5)
- Available with a vendor prefix: -webkit- (3.1)
- Available with a vendor prefix: -webkit- (18)
- Available with a vendor prefix: -webkit- (3.2)
- Available with a vendor prefix: -webkit- (1)
- Available with a vendor prefix: -webkit- (12)
- Available with a vendor prefix: -webkit- (49)
- Available with a vendor prefix: -moz- (3.5)
- Available with a vendor prefix: -webkit- (2)
- Available with a vendor prefix: -webkit- (18)
- Available with a vendor prefix: -webkit- (1)
- Before Firefox 16, the translation values of `matrix()` could be `<length>`s, in addition to the standard `<number>`.
- Firefox 14 removed experimental support for `skew()`, but it was reintroduced in Firefox 15.
Syntax
.rotate { transform: rotate(45deg); }
.scale { transform: scale(1.5); }
.move { transform: translate(50px, 20px); }
.combined { transform: rotate(10deg) scale(1.2); }Live demo
Use cases
Using 2D transforms
The transform CSS property and its 2D transform functions allow rotating, scaling, skewing, and translating an element. Arbitrary 2D transforms are also possible using a transformation matrix.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.
Related links
Powered by web-features