CSS3 3D Conversion
3D Transforms
CSS3 allows you to use 3D to format conversion element.
In this chapter, you'll learn some of the 3D conversion methods:
- rotateX ()
- rotateY ()
Click on the following elements to see the difference between 2D and 3D Conversion Conversion between:
2D rotate
3D rotate
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 | 36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
transform-origin (three-value syntax) |
36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
transform-style | 36.0 12.0 -webkit- |
11.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
perspective | 36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
perspective-origin | 36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
backface-visibility | 36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
rotateX () method
rotateX () method, whose elements around a given number of degrees of rotation in the X-axis.
Examples
div
{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari and Chrome */
}
{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari and Chrome */
}
try it"
rotateY () method
rotateY () method, whose elements around a given number of degrees of rotation in the Y-axis.
Examples
div
{
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg); /* Safari and Chrome */
}
{
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg); /* Safari and Chrome */
}
try it"
Conversion property
The following table lists all the transformation properties:
Attributes | description | CSS |
---|---|---|
transform | Applied to the element 2D or 3D conversion. | 3 |
transform-origin | It allows you to change the position of the element to be converted. | 3 |
transform-style | Provision was how nested elements are displayed in 3D space. | 3 |
perspective | Provisions 3D perspective effect element. | 3 |
perspective-origin | A predetermined position of the bottom of the 3D element. | 3 |
backface-visibility | Define the elements when not in the face of the screen is visible. | 3 |
3D conversion method
function | description |
---|---|
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. |
translate3d(x, y, z) | Defined 3D transformation. |
translateX(x) | Define 3D conversion, using only the values for the X axis. |
translateY(y) | Define 3D conversion, using only the values for the Y-axis. |
translateZ(z) | Define 3D conversion, using only the values for the Z axis. |
scale3d(x, y, z) | Define 3D scale transformation. |
scaleX(x) | 3D scale transformation is defined by a given value of X-axis. |
scaleY(y) | 3D scale transformation is defined by a given value of Y-axis. |
scaleZ(z) | 3D scale transformation is defined by a given value of Z axis. |
rotate3d (x, y, z,angle) | Define 3D rotation. |
rotateX(angle) | Defined along the X axis 3D rotation. |
rotateY(angle) | Defined along the Y axis 3D rotation. |
rotateZ(angle) | Defined along the Z axis 3D rotation. |
perspective(n) | 3D perspective view of the definition of the conversion element. |