The CSS transform
property lets you modify the coordinate space of the CSS visual formatting model. Using it, elements can be translated, rotated, scaled, and skewed.
/* Keyword values */ transform: none; /* Function values */ transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0); transform: translate(12px, 50%); transform: translateX(2em); transform: translateY(3in); transform: scale(2, 0.5); transform: scaleX(2); transform: scaleY(0.5); transform: rotate(0.5turn); transform: skew(30deg, 20deg); transform: skewX(30deg); transform: skewY(1.07rad); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: translate3d(12px, 50%, 3em); transform: translateZ(2px); transform: scale3d(2.5, 1.2, 0.3); transform: scaleZ(0.3); transform: rotate3d(1, 2.0, 3.0, 10deg); transform: rotateX(10deg); transform: rotateY(10deg); transform: rotateZ(10deg); transform: perspective(17px); /* Multiple function values */ transform: translateX(10px) rotate(10deg) translateY(5px); /* Global values */ transform: inherit; transform: initial; transform: unset;
<div id="container"> <div class="subcontainer"> <img class="none" src="https://mdn.mozillademos.org/files/15157/firefox.png"> <div class="caption">none</div> </div> <div class="subcontainer"> <img class="translate" src="https://mdn.mozillademos.org/files/15157/firefox.png"> <div class="caption">translate</div></div> <div class="subcontainer"> <img class="scale" src="https://mdn.mozillademos.org/files/15157/firefox.png"> <div class="caption">scale</div> </div> <div class="subcontainer"> <img class="skew" src="https://mdn.mozillademos.org/files/15157/firefox.png"> <div class="caption">skew</div> </div> <div class="subcontainer"> <img class="rotate" src="https://mdn.mozillademos.org/files/15157/firefox.png"> <div class="caption">rotate</div> </div>
#container { width: 100%; height: 300px; background-color: #F4F7F8; display: flex; } .subcontainer { width: 100%; border: 1px solid black; height: 250px; margin: 10px; padding: 10px; background-color: white; position: relative; } .caption { color: black; font-family: monospace; font-weight: bold; position: absolute; bottom: 10px; } .none { transform: none; } .translate { transform: translate(0, 80px); } .scale { transform: scale(2); } .skew { transform: skew(30deg, 20deg); } .rotate { transform: rotate(0.5turn); } img { max-width: 100%; max-height: 100%; }
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.
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 |
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, see below. 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
See Using CSS transforms.
Live example
HTML content
<p>Transformed element</p>
CSS content
p { border: solid red; -webkit-transform: translate(100px) rotate(20deg); -webkit-transform-origin: 0 -250px; transform: translate(100px) rotate(20deg); transform-origin: 0 -250px; }
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 |
Browser compatibility
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | (Yes) -webkit 36 |
(Yes)-webkit (Yes) |
3.5 (1.9.1)-moz[1] 16.0 (16.0)[2] |
9.0-ms[3] 10.0 |
10.5-o 12.10 15.0-webkit 23 |
3.1-webkit 9.0 |
3D Support | 12.0-webkit 36 |
(Yes) | 10.0-moz 16.0 (16.0) |
10.0 | 15.0-webkit 23 |
4.0-webkit |
Feature | Android | Chrome for Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|---|
Basic support | 2.1-webkit[4] | (Yes)-webkit | (Yes)-webkit (Yes) |
(Yes) | (Yes) 11.0-webkit[5] |
11.5-webkit | 3.2 (Yes)-webkit 9.0 |
3D Support | 3.0-webkit | (Yes)-webkit | (Yes) | (Yes) | (Yes) | 22-webkit | 3.2 (Yes)-webkit 9.0 |
[1] Gecko 14.0 removed the experimental support for skew()
, but it was reintroduced in Gecko 15.0 for compatibility reasons. As it is non-standard and will likely be removed in the future, do not use it.
[2] Before Firefox 16, the translation values of matrix()
and matrix3d()
could be <length>
, in addition to the standard <number>
.
In addition to the unprefixed support, Gecko 44.0 (Firefox 44.0 / Thunderbird 44.0 / SeaMonkey 2.41) added support for a -webkit
prefixed version of the property for web compatibility reasons behind the preference layout.css.prefixes.webkit
, defaulting to false
. Since Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) the preference defaults to true
.
[3] Internet Explorer 5.5 or later supports a proprietary Matrix Filter which can be used to achieve a similar effect.
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.
Internet Explorer does not support the global values initial
and unset.
[4] Android 2.3 has a bug where input forms will "jump" when typing, if any container element has a -webkit-transform
.
[5] Internet Explorer 11.0 supports the -webkit prefixed variant as an alias for the default one.
See also
- Using CSS Transforms
- <translation-function> data type
- More info on CSS3 Rotation / Matrix Filter issues in the comments on Paul Irish's blog.
- A cross-browser 2D transform plugin for jQuery