CSS3 transformProperty
Example
Rotate div elements:
div
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
}
Try it Yourself »
Browser Support
The number in the table indicates the first browser version that supports this property.
The number immediately preceding -webkit-, -ms-, or -moz- is the first browser version that supports the prefixed property.
| Property | |||||
|---|---|---|---|---|---|
| transform (2D) | 36.0 4.0 -webkit- |
10.0 9.0 -ms- |
16.0 3.5 -moz- |
9.0 3.2 -webkit- |
23.0 15.0 -webkit- 10.5 -o- |
| transform (3D) | 36.0 12.0 -webkit- |
12.0 | 10.0 | 16.0 10.0 -moz- |
9.0 4.0 -webkit- |
Property definition and usage instructions
The Transform property is used to apply 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 viewOnline Examples.
| Default value: | none |
|---|---|
| Inherited: | no |
| version: | CSS3 |
| JavaScript Syntax: | object.style.transform="rotate(7deg)" |
Syntax
transform: none|transform-functions;
| Value | Description |
|---|---|
| none | Define 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) | Define 2D transformation. |
| translate3d(x,y,z) | Define 3D transformation. |
| translateX(x) | Defines a transformation, using only the value for the X axis. |
| translateY(y) | Defines a transformation, using only the value for the Y axis. |
| translateZ(z) | Defines a 3D transformation, using only the value for the Z axis. |
| scale(x[,y]?) | Define 2D scaling transformation. |
| scale3d(x,y,z) | Define 3D scaling transformation. |
| scaleX(x) | Defines a scaling transformation by setting a value for the X axis. |
| scaleY(y) | Defines a scaling transformation by setting a value for the Y axis. |
| scaleZ(z) | Defines a 3D scaling transformation by setting a value for the Z axis. |
| rotate(angle) | Defines a 2D rotation, with the angle specified in the parameter. |
| rotate3d(x,y,z,angle) | Define 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 axes. |
| 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 3D transformed elements. |
More Examples
Rotate Image
This example demonstrates how to create "polaroid" photos and rotate pictures.
CSS3 Transform Various Deformations and Rotations
other extensions