How to Use rotateX and rotateY in CSS for 3D Rotation

Use rotateX(angle) and rotateY(angle) in CSS to rotate elements around the horizontal (X) and vertical (Y) axes in 3D space. Apply these inside the transform property with angles in degrees, like transform: rotateX(45deg);.

Syntax

The rotateX() and rotateY() functions are used inside the CSS transform property to rotate an element in 3D space.

• rotateX(angle): Rotates the element around the X-axis (horizontal axis).
• rotateY(angle): Rotates the element around the Y-axis (vertical axis).
• angle: The rotation angle, usually in degrees (e.g., 45deg, -30deg).

Positive angles rotate clockwise when looking from the positive axis direction.

css

selector {
  transform: rotateX(45deg);
  /* or */
  transform: rotateY(-30deg);
}

Example

This example shows a square that rotates 45 degrees around the X-axis and 30 degrees around the Y-axis when hovered. It demonstrates how rotateX and rotateY create 3D rotation effects.

css

html, body {
  height: 100%;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f0f0f0;
}
.container {
  perspective: 600px;
}
.box {
  width: 150px;
  height: 150px;
  background-color: #4a90e2;
  color: white;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  border-radius: 12px;
  transition: transform 0.6s ease;
  transform-style: preserve-3d;
}
.box:hover {
  transform: rotateX(45deg) rotateY(30deg);
}

Output

<div style="width:150px; height:150px; background:#4a90e2; color:#fff; font-weight:bold; display:flex; justify-content:center; align-items:center; font-size:1.5rem; border-radius:12px; transition:transform 0.6s ease; transform-style:preserve-3d;">Hover me</div>

Common Pitfalls

• Forgetting transform-style: preserve-3d;: Without this, 3D rotations may not render properly.
• Not setting perspective: Perspective gives depth to 3D transforms; without it, rotations look flat.
• Using angles without units: Always specify units like deg or rad.
• Combining multiple transforms incorrectly: Order matters; rotateX(45deg) rotateY(30deg) is different from rotateY(30deg) rotateX(45deg).

css

/* Wrong: No perspective and no preserve-3d */
.box {
  transform: rotateX(45deg);
  transition: transform 0.5s;
}

/* Right: With perspective and preserve-3d */
.container {
  perspective: 600px;
}
.box {
  transform-style: preserve-3d;
  transition: transform 0.5s;
}
.box:hover {
  transform: rotateX(45deg);
}

Quick Reference

Remember these tips when using rotateX and rotateY:

• Use transform: rotateX(angle) to tilt up/down.
• Use transform: rotateY(angle) to tilt left/right.
• Set perspective on a parent container for depth.
• Use transform-style: preserve-3d; on the element for proper 3D effect.
• Combine rotations by chaining inside transform.

Key Takeaways

Use rotateX(angle) and rotateY(angle) inside the transform property to rotate elements in 3D.

Always set perspective on a parent container to see 3D depth effects.

Add transform-style: preserve-3d to keep 3D transformations visible.

Specify angle units like degrees (deg) to avoid errors.

Order of rotations matters when combining rotateX and rotateY.