Rotating div elements:
div
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
}
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
}
Try it out . . .
Browser support
The numbers in the table support the first browser version number of the property.
The number immediately before -webkit-, -ms- or -moz- is the first browser version number that supports the prefix property.
| Attributes | |||||
|---|---|---|---|---|---|
| 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- |
Description of property definition and use
Transform properties are applied to 2D or 3D transformations of elements. This property allows you to rotate, scale, move, tilt, and so on.
To better understand Transform properties, check out the online instance .
| Default: | none |
|---|---|
| Inherited: | no |
| Version: | CSS3 |
| JavaScript syntax: | object .style.transform="rotate(7deg)" |
Grammar
transform: none|
transform-functions
;
| Value | Describe | |
|---|---|---|
| none | Definitions are not converted. | |
| matrix( n , n , n , n , n , n ) | Defines a 2D transformation that uses 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 that uses a 4x4 matrix of 16 values. | |
| translate( x , y ) | Define 2D transformations. | |
| translate3d( x , y , z ) | Define 3D transformations. | |
| translateX( x ) | Define the transformation, only with the value of the X-axis. | |
| translateY( y ) | Define the transformation, just the value of the Y axis. | |
| translateZ( z ) | Defines a 3D transformation, only with the value of the Z axis. | |
| scale( x [, y ]?) | Define a 2D scale conversion. | |
| scale3d( x , y , z ) | Define a 3D scale conversion. | |
| scaleX( x ) | Define the scale conversion by setting the value of the X-axis. | |
| scaleY( y ) | Define the scale conversion by setting the value of the Y-axis. | |
| scaleZ( z ) | Define a 3D scale conversion by setting the value of the Z-axis. | |
| rotate( angle ) | Define 2D rotation and specify the angle in the parameters. | |
| rotate3d( x , y , z , angle ) | Define 3D rotation. | |
| rotateX( angle ) | Defines the 3D rotation along the X-axis. | |
| rotateY( angle ) | Defines the 3D rotation along the Y axis. | |
| rotateZ( angle ) | Defines the 3D rotation along the Z axis. | |
| skew( x-angle , y-angle ) | Defines a 2D tilt conversion along the X and Y axes. | |
| skewX( angle ) | Defines a 2D tilt conversion along the X-axis. | |
| skewY( angle ) | Defines a 2D tilt conversion along the Y axis. | |
| perspective( n ) | Define perspective views for 3D conversion elements. |
More instances
Rotate the picture
This example shows how to create a "polaroid" photo and rotate a picture.