The transform CSS property lets you modify the coordinate space of the CSS visual formatting model. Using it, elements can be translated, rotated, scaled, and skewed.

If the property has a value different than none, a stacking context will be created. In that case the object will act as a containing block for position: fixed elements that it contains.

Syntax

The transform property may be specified as either the keyword value none or as one or more <transform-function> values.

Values

<transform-function>
One or more of the CSS transform functions to be applied. Composite transforms are effectively applied in order from left to right.
none
Specifies that no transform should be applied.

Formal syntax

none | <transform-list>

where
<transform-list> = <transform-function>+

where
<transform-function> = [ <matrix()> || <translate()> || <translateX()> || <translateY()> || <scale()> || <scaleX()> || <scaleY()> || <rotate()> || <skew()> || <skewX()> || <skewY()> || <matrix3d()> || <translate3d()> || <translateZ()> || <scale3d()> || <scaleZ()> || <rotate3d()> || <rotateX()> || <rotateY()> || <rotateZ()> || <perspective()> ]+

where
<matrix()> = matrix( <number> [, <number> ]{5,5} )
<translate()> = translate( <length-percentage> [, <length-percentage> ]? )
<translateX()> = translateX( <length-percentage> )
<translateY()> = translateY( <length-percentage> )
<scale()> = scale( <number> [, <number> ]? )
<scaleX()> = scaleX( <number> )
<scaleY()> = scaleY( <number> )
<rotate()> = rotate( <angle> )
<skew()> = skew( <angle> [, <angle> ]? )
<skewX()> = skewX( <angle> )
<skewY()> = skewY( <angle> )
<matrix3d()> = matrix3d( <number> [, <number> ]{15,15} )
<translate3d()> = translate3d( <length-percentage> , <length-percentage> , <length> )
<translateZ()> = translateZ( <length> )
<scale3d()> = scale3d( <number> , <number> , <number> )
<scaleZ()> = scaleZ( <number> )
<rotate3d()> = rotate3d( <number> , <number> , <number> , <angle> )
<rotateX()> = rotateX( <angle> )
<rotateY()> = rotateY( <angle> )
<rotateZ()> = rotateZ( <angle> )
<perspective()> = perspective( <length> )

where
<length-percentage> = <length> | <percentage>

Examples

HTML

<p>Transformed element</p>

CSS

p {
  border: solid red;
  transform: translate(100px) rotate(20deg);
  transform-origin: 0 -250px;
}

Result

Please see Using CSS transforms and <transform-function> for more examples.

Specifications

Specification Status Comment
CSS Transforms Level 2
The definition of 'transform' in that specification.
Editor's Draft Adds 3D transform functions.
CSS Transforms Level 1
The definition of 'transform' in that specification.
Working Draft Initial definition.

Initial valuenone
Applies totransformable elements
Inheritedno
Percentagesrefer to the size of bounding box
Mediavisual
Computed valueas specified, but with relative lengths converted into absolute lengths
Animation typea transform
Canonical orderthe unique non-ambiguous order defined by the formal grammar
Creates stacking contextyes

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support

36

Yes -webkit-

Yes -webkit-

16

49 -webkit-

44 -webkit- 2

103

11 -webkit-

9 -ms- 4

12.1

15 -webkit-

10.5 — 15 -o-

9

3.1 -webkit-

3D support12 Yes10105154
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
Basic support2.1 -webkit- 1 Yes -webkit- Yes -webkit-

16

49 -webkit-

44 -webkit- 2

Yes

11 -webkit-

11.5 -webkit-

9

3.2 -webkit-

3D support3 -webkit- Yes Yes Yes Yes223.2

1. Android 2.3 has a bug where input forms will "jump" when typing, if any container element has a -webkit-transform.

2. From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.

3. Internet Explorer does not support the global values initial and unset.

4. Internet Explorer 5.5 or later supports a proprietary Matrix Filter which can be used to achieve a similar effect.

5. Internet Explorer 9.0 or earlier has no support for 3D transforms. Mixing 3D and 2D transform functions, such as -ms-transform:rotate(10deg) translateZ(0);, will prevent the entire property from being applied.

See also