Latest web development tutorials

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

Rotate X

rotateX () method, whose elements around a given number of degrees of rotation in the X-axis.

OperaSafariChromeFirefoxInternet Explorer

Examples

div
{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari and Chrome */
}

try it"

rotateY () method

Rotate Y

rotateY () method, whose elements around a given number of degrees of rotation in the Y-axis.

OperaSafariChromeFirefoxInternet Explorer

Examples

div
{
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.