CSS3 transform property
Examples
Rotation div element:
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"
Browser Support
Figures in the table represent the first browser to support the version number of the property.
Immediately following the digital -webkit-, -ms- or -moz- ago in support of the prefix attribute first browser version number.
| 属性 | |||||
|---|---|---|---|---|---|
| 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- |
Attribute definitions and instructions
2D Transform property is applied to the element or 3D conversion. This property allows you to elements rotate, zoom, move, tilt, and so on.
To better understand the Transform properties, see the online instance .
| Defaults: | none |
|---|---|
| inherit: | no |
| version: | CSS3 |
| JavaScript syntax: | object .style.transform = "rotate (7deg)" |
grammar
transform:none | transform-functions;
| value | description |
|---|---|
| none | Definition does not convert. |
| matrix (n, n, n,n, n, n) | Define 2D conversion, using a matrix of six values. |
| matrix3d (n, n, n,n, n, n, n, n, n, n, n, n, n, n, n, n) | 3D conversion defined using 16 values 4x4 matrix. |
| translate(x, y) | Define the 2D conversion. |
| translate3d(x, y, z) | Define 3D conversion. |
| translateX(x) | Definition of conversion, but with the value of the X-axis. |
| translateY(y) | Definition of conversion, but with the value of the Y-axis. |
| translateZ(z) | Define 3D conversion, but with the value of Z axis. |
| scale (x [, y]?) | Define 2D scale transformation. |
| scale3d(x, y, z) | Define 3D scale transformation. |
| scaleX(x) | By setting the value of the X axis to define the scale transformation. |
| scaleY(y) | By setting the value of the Y axis to define the scale transformation. |
| scaleZ(z) | To define the 3D scale transformation by setting the value of the Z axis. |
| rotate(angle) | Define 2D rotated a predetermined angle in the argument. |
| rotate3d (x, y, z,angle) | Define 3D rotation. |
| rotateX(angle) | 3D X is defined along the shaft. |
| rotateY(angle) | 3D Y axis is defined along the rotation. |
| rotateZ(angle) | 3D Z-axis is defined along the rotation. |
| skew (x-angle, y-angle) | Defined along the 2D X and Y-axis skew transformation. |
| skewX(angle) | 2D X-axis is defined along the inclination of the conversion. |
| skewY(angle) | Defined along the Y-axis skew transformation 2D. |
| perspective(n) | 3D conversion element to define a perspective view. |
More examples
Rotate a picture
This example demonstrates how to create a "polaroid" photos and rotate pictures.