CSS3 transform Property
Example
Rotate a div element:
div {
transform: rotate(7deg);
-ms-transform: rotate(7deg); /* IE 9 */
-webkit-transform: rotate(7deg); /* Safari and Chrome */
}
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Numbers prefixed with -webkit-, -ms-, or -moz- indicate the first version of the browser that supported the prefixed property.
| Property | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| transform (2D) | 36.0 <br>4.0 -webkit- | 10.0 <br>9.0 -ms- | 16.0 <br>3.5 -moz- | 9.0 <br>3.2 -webkit- | 23.0 <br>15.0 -webkit- <br>10.5 -o- |
| transform (3D) | 36.0 <br>12.0 -webkit- | 12.0 | 10.0 | 16.0 <br>10.0 -moz- | 9.0 <br>4.0 -webkit- |
Property Definition and Usage
The Transform property applies 2D or 3D transformations to an element. This property allows you to rotate, scale, move, skew, etc., elements.
To better understand the Transform property, please check out the online example.
| Default value: | none |
|---|---|
| Inherited: | no |
| Version: | CSS3 |
| JavaScript syntax: | object.style.transform="rotate(7deg)" |
Syntax
| Value | Description |
|---|---|
| none | Defines that there should be no transformation. |
| matrix(n,n,n,n,n,n) | Defines a 2D transformation, using a matrix of six values. |
| matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | Defines a 3D transformation, using a 4x4 matrix of 16 values. |
| translate(x,y) | Defines a 2D translation. |
| translate3d(x,y,z) | Defines a 3D translation. |
| translateX(x) | Defines a translation, using only the value for the X-axis. |
| translateY(y) | Defines a translation, using only the value for the Y-axis. |
| translateZ(z) | Defines a 3D translation, using only the value for the Z-axis. |
| scale(x[,y]?) | Defines a 2D scale transformation. |
| scale3d(x,y,z) | Defines a 3D scale transformation. |
| scaleX(x) | Defines a scale transformation by giving a value for the X-axis. |
| scaleY(y) | Defines a scale transformation by giving a value for the Y-axis. |
| scaleZ(z) | Defines a 3D scale transformation by giving a value for the Z-axis. |
| rotate(angle) | Defines a 2D rotation, the angle is specified in the parameter. |
| rotate3d(x,y,z,angle) | Defines a 3D rotation. |
| rotateX(angle) | Defines a 3D rotation along the X-axis. |
| rotateY(angle) | Defines a 3D rotation along the Y-axis. |
| rotateZ(angle) | Defines a 3D rotation along the Z-axis. |
| skew(x-angle,y-angle) | Defines a 2D skew transformation along the X- and Y-axis. |
| skewX(angle) | Defines a 2D skew transformation along the X-axis. |
| skewY(angle) | Defines a 2D skew transformation along the Y-axis. |
| perspective(n) | Defines a perspective view for a 3D transformed element. |