1. Home
  2. CSS3 3D Conversion

The best CSS3 3D Conversion Tutorial In 2024, In this tutorial you can learn 3D Transforms,Browser Support,rotateX () method,Examples,rotateY () method,Examples,Conversion property,3D conversion method,

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 */
}


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 */
}


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.

Hot Tools

Other Tools

Online Tutorial

Website Navigation

CSS3 3D Conversion
10/30