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 value | none |
---|---|
Applies to | transformable elements |
Inherited | no |
Percentages | refer to the size of bounding box |
Media | visual |
Computed value | as specified, but with relative lengths converted into absolute lengths |
Animation type | a transform |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Creates stacking context | yes |
Browser compatibility
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 36 Yes -webkit- | Yes -webkit- | 16 49 -webkit- | 103 11 -webkit- | 12.1 15 -webkit- 10.5 — 15 -o- | 9 3.1 -webkit- |
3D support | 12 | Yes | 10 | 105 | 15 | 4 |
Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
---|---|---|---|---|---|---|---|
Basic support | 2.1 -webkit- 1 | Yes -webkit- | Yes -webkit- | 16 49 -webkit- | Yes 11 -webkit- | 11.5 -webkit- | 9 3.2 -webkit- |
3D support | 3 -webkit- | Yes | Yes | Yes | Yes | 22 | 3.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
- Using CSS transforms
<transform-function>
data type- A cross-browser 2D transform plugin for jQuery