Combine rotateX, rotateY, and rotateZ for 3D Rotation

Multi-Axis 3D Rotation

Combining rotations around all three axes creates complex 3D orientations. The order of rotations significantly affects the final appearance due to how matrix multiplication works.

The CSS

.element {
  transform: rotateX(30deg) rotateY(-45deg) rotateZ(15deg);
  perspective: 600px;
}

The Three Axes

• rotateX — Tilts forward/backward (like nodding your head). Positive values tilt the top edge away from the viewer.
• rotateY — Turns left/right (like shaking your head). Positive values turn the right edge away.
• rotateZ — Spins in the screen plane (like tilting your head). Positive values rotate clockwise.

Rotation Order Matters

CSS transforms apply right-to-left. This means the last function in the declaration is applied first:

/* rotateZ applied first, then rotateY, then rotateX */
transform: rotateX(30deg) rotateY(-45deg) rotateZ(15deg);

/* Different result: rotateX first, then rotateY, then rotateZ */
transform: rotateZ(15deg) rotateY(-45deg) rotateX(30deg);

Alternative: rotate3d()

For a single rotation around an arbitrary axis, use rotate3d(x, y, z, angle):

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

This rotates 45 degrees around the axis defined by the vector (1, 1, 0), which is the diagonal between the X and Y axes.