CSS rotate3d() Function

The CSS rotate3d() function is used to rotate elements in a three-dimensional space.

The rotate3d() function rotates the element along the x, y, and z axes using the angle provided as an argument.

You can specify the axis/axes of rotation using a number for the first three arguments. The fourth argument specifies the angle. You can provide the angle as any valid angle value (i.e. in degrees, gradians, radians, or turns). See rotate() for an example of each of these values.

Rotate along the `x` Axis

This example rotates 60 degrees around the x axis. It's the equivalent of rotateX(60deg).

<style>
  .rotated {
    transform: rotate3d(1, 0, 0, 60deg);
  }
  div {
    padding: 20px;
    margin: 20px;
    width: 120px;
    background: limegreen;
    color: white;
    font-family: sans-serif;
  }
</style>

<div class="rotated">
  Rotated.
</div>
<div>
  Not rotated.
</div>

Rotate along the `y` Axis

This example rotates 60 degrees around the y axis. It's the equivalent of rotateY(60deg).

<style>
  .rotated {
    transform: rotate3d(0, 1, 0, 60deg);
  }
  div {
    padding: 20px;
    margin: 20px;
    width: 120px;
    background: limegreen;
    color: white;
    font-family: sans-serif;
  }
</style>

<div class="rotated">
  Rotated.
</div>
<div>
  Not rotated.
</div>

Rotate along the `z` Axis

This example rotates 60 degrees around the z axis. It's the equivalent of rotateZ(60deg).

<style>
  .rotated {
    transform: rotate3d(0, 0, 1, 60deg);
  }
  div {
    padding: 20px;
    margin: 20px;
    width: 120px;
    background: limegreen;
    color: white;
    font-family: sans-serif;
  }
</style>

<div class="rotated">
  Rotated.
</div>
<div>
  Not rotated.
</div>

Rotate along all Axes

This example rotates along the x, y, and z axes.

<style>
  .rotated {
    transform: rotate3d(1, 5, 1, 60deg);
  }
  div {
    padding: 20px;
    margin: 20px;
    width: 120px;
    background: limegreen;
    color: white;
    font-family: sans-serif;
  }
</style>

<div class="rotated">
  Rotated.
</div>
<div>
  Not rotated.
</div>

Negative Values

You can also use negative values. A negative value will rotate the element in a counter-clockwise direction.

Example:

<style>
  .rotated {
    transform: rotate3d(1, -5, 1, -60deg);
  }
  div {
    padding: 20px;
    margin: 20px;
    width: 120px;
    background: limegreen;
    color: white;
    font-family: sans-serif;
  }
</style>

<div class="rotated">
  Rotated.
</div>
<div>
  Not rotated.
</div>

Adding `transform-origin`

The default origin for the rotation is 50% 50%. You can use transform-origin to adjust the origin of the transformation:

<style>
  .rotated {
    transform-origin: 90% 90%;
    transform: rotate3d(1, -5, 1, -60deg);
  }
  div {
    padding: 20px;
    margin: 20px;
    width: 120px;
    background: limegreen;
    color: white;
    font-family: sans-serif;
  }
</style>

<div class="rotated">
  Rotated.
</div>
<div>
  Not rotated.
</div>

Official Syntax

The official syntax of the rotate3d() function is as follows:

Possible Values

The first three parameters describe the [x, y, z] direction vectors. The fourth parameter specifies the angle to be used. It works like this:

x

A number value that describes the x-coordinate of the vector denoting the axis of rotation.

y

A number value that describes the y-coordinate of the vector denoting the axis of rotation.

z

A number value that describes the z-coordinate of the vector denoting the axis of rotation.

a

An angle value that represents the angle of the rotation. A positive value results in a clockwise rotation, a negative value results in a counter-clockwise rotation.

The angle can be represented with any of the following unit identifiers:

deg: Degrees. There are 360 degrees in a full circle.
grad: Gradians, also known as "gons" or "grades" (although these aren't valid unit identifiers — you should still use grad as the unit identifier). There are 400 gradians in a full circle.
rad: Radians. There are 2Ï€ radians in a full circle.
turn: Turns. There is 1 turn in a full circle.

Zero Angles

The unit identifier is optional for zero angles. For example, both rotate3d(1, 0, 0, 0deg) and rotate3d(1, 0, 0, 0) are valid (but rotate3d(1, 0, 0, 45) is not).

A direction vector that cannot be normalized, such as 0, 0, 0, will cause the rotation to not be applied.

For example, rotate3d(0, 0, 0, 90deg) will result in no rotation being applied.

CSS Specifications

The rotate3d() function is defined in CSS Transforms Module Level 1 (W3C Working Draft)

Browser Support

The following table provided by Caniuse.com shows the level of browser support for this feature.