CSS3 3D Transform

3D transformation

CSS3 allows you to format elements using 3D transformations.

In this chapter, you will learn some of these 3D transformation methods:

  • rotateX()

  • rotateY()

Browser support

The numbers in the table represent the first browser version number that supports the property.

The number immediately preceding -webkit-, -ms- or -moz- is the version number of the first browser that supports the prefixed attribute.

Property1643985194172053596.png1643985208463030831.png1643985222261087814.png1643985235170032573.png1643985254818020619.png
transform36.0
12.0 -webkit-		10.016.0
10.0 -moz-		4.0 -webkit-23.0
15.0 -webkit-
transform-origin
(three-value syntax)		36.0
12.0 -webkit-		10.016.0
10.0 -moz-		4.0 -webkit-23.0
15.0 -webkit-
transform-style36.0
12.0 -webkit-		11.016.0
10.0 -moz-		4.0 -webkit-23.0
15.0 -webkit-
perspective36.0
12.0 -webkit-		10.016.0
10.0 -moz-		4.0 -webkit-23.0
15.0 -webkit-
perspective-origin36.0
12.0 -webkit-		10.016.0
10.0 -moz-		4.0 -webkit-23.0
15.0 -webkit-
backface-visibility36.0
12.0 -webkit-		10.016.0
10.0 -moz-		4.0 -webkit-23.0
15.0 -webkit-

rotateX() method

Rotate X

The rotateX() method, around which the element is rotated on the X axis by a given degree.

OperaSafariChromeFirefoxInternet Explorer

Example

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

Try It! 

rotateY() method

Rotate Y

The rotateY() method, around which the element is rotated on the Y axis by a given degree.

OperaSafariChromeFirefoxInternet Explorer

Example

div
{
    transform: rotateY(130deg);
    -webkit-transform: rotateY(130deg); /* Safari 与 Chrome */
}

Try It! 

Transform properties

The following table lists all conversion properties:

PropertyDescriptionCSS
transformApply a 2D or 3D transformation to an element.3
transform-originAllows you to change the position of the transformed element.3
transform-styleSpecifies how nested elements are displayed in 3D space.3
perspectiveSpecifies the perspective effect of 3D elements.3
perspective-originSpecifies the bottom position of the 3D element.3
backface-visibilityDefines whether the element is visible when not facing the screen.3

3D conversion methods

FunctionDescription
matrix3d(n,n,n,n,n,n,
n,n,n,n,n,n,n,n,n,n)		Defines a 3D transformation, using a 4x4 matrix of 16 values.
translate3d(x,y,z)Define 3D transformations.
translateX(x)Defines the 3D transformation, using only the values for the X axis.
translateY( y )Defines a 3D transformation, using only the value for the Y axis.
translateZ ( z )Defines a 3D transformation, using only the value for the Z axis.
scale3d(x,y,z)Defines the 3D scaling transformation.
scaleX(x)Defines the 3D scaling transformation by giving an X-axis value.
scaleY(y)Defines the 3D scaling transformation, by giving a value for the Y axis.
scaleZ(z)Defines the 3D scaling transformation, by giving a value for the Z axis.
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.
perspective(n)Defines the perspective view of the 3D transform element.