CSS 3D transformations

CSS 3D transformations

CSS also supports 3D transformations.

Please hover the mouse over the following elements to view the difference between 2D and 3D transformations:

2D rotate
3D rotate

In this chapter, you will learn the following CSS properties:

  • transform

Browser Support

The numbers in the table indicate the first browser version that fully supports this property.

Property Chrome IE Firefox Safari Opera
transform 36.0 10.0 16.0 9.0 23.0

CSS 3D Transformation Methods

Through CSS transform Properties, you can use the following 3D transformation methods:

  • rotateX()
  • rotateY()
  • rotateZ()

rotateX() Method

Rotate X

rotateX() Method to rotate an element around its X-axis by a given angle:

Example

#myDiv {
  transform: rotateX(150deg);
}

Try It Yourself

rotateY() Method

Rotate Y

rotateY() Method to rotate an element around its Y-axis by a given angle:

Example

#myDiv {
  transform: rotateY(130deg);
}

Try It Yourself

rotateZ() Method

rotateZ() Method to rotate an element around its Z-axis by a given angle:

Example

#myDiv {
  transform: rotateZ(90deg);
}

Try It Yourself

CSS Transformation Properties

The following table lists all 3D transformation properties:

Property Description
transform Apply 2D or 3D transformations to an element.
transform-origin Allow you to change the position of the transformed element.
transform-style Specify how nested elements are displayed in 3D space.
perspective Specify the perspective effect of a 3D element.
perspective-origin Specify the bottom position of a 3D element.
backface-visibility Define whether an element is visible when it is not facing the screen.

CSS 3D Transformation Methods

Function Description
matrix3d(n,n,n,n,n,n,
n,n,n,n,n,n,n,n,n,n)		 Define a 3D transformation using a 4x4 matrix with 16 values.
translate3d(x,y,z) Define a 3D transformation.
translateX(x) Define a 3D transformation, using only the value for the X-axis.
translateY(y) Define a 3D transformation, using only the value for the Y-axis.
translateZ(z) Define a 3D transformation, using only the value for the Z-axis.
scale3d(x,y,z) Define a 3D scaling transformation.
scaleX(x) Define a 3D scaling transformation by providing an X-axis value.
scaleY(y) Define a 3D scaling transformation by providing a Y-axis value.
scaleZ(z) Define a 3D scaling transformation by providing a Z-axis value.
rotate3d(x,y,z,angle) Define the 3D rotation.
rotateX(angle) Define the 3D rotation along the X-axis.
rotateY(angle) Define the 3D rotation along the Y-axis.
rotateZ(angle) Define the 3D rotation along the Z-axis.
perspective(n) Define the perspective view of a 3D transformation element.