rotate3d() CSS Function

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The rotate3d() CSS function is used to apply a three-dimensional rotation to an element around a vector defined by its X, Y, and Z axes. It allows for more complex rotations than simple two-dimensional transforms like rotate(), giving designers and developers precise control over how elements are oriented in 3D space. The function takes four parameters: the X, Y, and Z components of the rotation vector, followed by the rotation angle. This angle can be specified using units such as deg or rad.

Using rotate3d() is particularly useful in combination with the transform property to create dynamic visual effects, like spinning cards, interactive UI elements, or 3D animations. Unlike simpler 2D rotations, rotate3d() can rotate an element in a direction that is not aligned with the standard X or Y axes, providing a true three-dimensional effect.

For example, to rotate an element diagonally in 3D space:

.card {
  transform: rotate3d(1, 1, 0, 45deg);
}

In this case, the element rotates 45 degrees around a vector that is equally along the X and Y axes, producing a slanted 3D rotation. This function can be combined with other transforms like scale() or translate3d() to create complex motion and interactive effects.

Using perspective via the perspective property can enhance the 3D illusion, making the rotations appear more realistic when viewed on elements such as div containers or images.

Syntax

transform: rotate3d( <numberX> , <numberY> , <numberZ> , <angle> );

Values

lt;numberX>Is a lt;number> describing the x-coordinate of the vector denoting the axis of rotation which could between 0 and 1.
lt;numberY>Is a lt;number> describing the y-coordinate of the vector denoting the axis of rotation which could between 0 and 1.
lt;numberZ>Is a lt;number> describing the z-coordinate of the vector denoting the axis of rotation which could between 0 and 1.
lt;angle>Is an lt;angle> representing the angle of the rotation. A positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one.

Example

HTML

<div class="scene">

  <div class="cube">

    <div class="face">ROTATE ME</div>

  </div>

</div>

CSS

/* The scene creates the 3D space */

.scene {

  width: 200px;

  height: 200px;

  margin: 80px auto;

  perspective: 600px;

}



/* The element we are rotating */

.cube {

  width: 100%;

  height: 100%;

  position: relative;

  background: #3498db;

  display: flex;

  align-items: center;

  justify-content: center;

  color: white;

  font-weight: bold;

  border: 2px solid #2980b9;

  

  /* Applying the 3D rotation */

  /* This rotates 45 degrees around a vector pointing diagonally (1,1,1) */

  transform: rotate3d(1, 1, 1, 45deg);

  

  transition: transform 0.5s ease;

}



/* Hover effect to show movement */

.cube:hover {

  transform: rotate3d(1, 1, 1, 180deg);

}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS rotate3d() function. Hover over a browser icon to see the version that first introduced support for this CSS function.