Skip to content
Latest: Publish JavaScript Packages to NPM Like a Pro!

CSS rotate3d() Function – How to Rotate Elements in 3D

rotate3d() transforms an element by rotating it three-dimensionally around the x-, y-, and z-axis.

Illustration of the 3D Cartesian coordinate
system

A three-dimensional Cartesian coordinate system showing the X-, Y-, and Z-axis

rotate3d() accepts four arguments. Here is the syntax:

element {
transform: rotate3d(x, y, z, angle);
}

Note the following:

  • The x, y, and z arguments are numbers specifying the x-, y-, and z-coordinates.
  • The coordinates are the axis around which the element will rotate.
  • The angle argument specifies the element’s angle of rotation.
  • angle can be in degree, gradian, radian, or turn.
  • An angle argument consists of a number followed by the unit you wish to use—for instance, 45deg.

Below are some examples of how the CSS rotate3d() function works.

How to do a 70-degree rotation around the Z-axis

Section titled “How to do a 70-degree rotation around the Z-axis”
img {
transform: rotate3d(0, 0, 1, 70deg);
width: 80%;
}

Try Editing It

The snippet above used the rotate3d() function to specify a seventy-degree (70⁰) rotation for the image around the Z-axis.

How to do a 70-degree rotation around the X-, Y-, and Z-axis

Section titled “How to do a 70-degree rotation around the X-, Y-, and Z-axis”
img {
transform: rotate3d(1, 1, 1, 70deg);
width: 80%;
}

Try Editing It

The snippet above used the rotate3d() function to specify a seventy-degree (70⁰) rotation for the image around the x-, y-, and z-axis.

CSS rotate3d() Function vs. rotate Property: What’s the Difference?

Section titled “CSS rotate3d() Function vs. rotate Property: What’s the Difference?”

CSS rotate3d() functions and CSS rotate property provide two similar ways to specify rotation transformations.

The main differences between the two rotation techniques are as follows:

  • The CSS rotate property allows rotating an element without using the CSS transform property.
  • The CSS rotate property’s syntax is shorter than its function alternative.
  • The CSS rotate property saves you from remembering the specific order to position the transform functions.
  • Browsers calculate the transform functions’ matrix in the order you assigned them to the CSS transform property—from left to right.
  • Browsers calculate the transform properties’ matrix in the following transformation matrix order:
    1. translate
    2. rotate
    3. scale

Here’s an example:

Use CSS rotate property to do a 70-degree rotation around the X-, Y-, and Z-axis:

img {
rotate: 1 1 1 70deg; /* Equal to a transform: rotate3d(1, 1, 1, 70deg) property */
width: 80%;
}

Try Editing It

The snippet above used the rotate property to specify a seventy-degree (70⁰) rotation for the image around the x-, y-, and z-axis.