Mastering CSS rotateY(): A Complete Guide to 3D Horizontal Rotation

What is rotateY()?

The CSS rotateY() function spins an element around its vertical (y) axis, creating a horizontal flip effect. Imagine a playing card pivoting left or right on a central vertical line—that's the motion this transform produces. It belongs to the transform property's family of 3D functions and is defined in the CSS Transforms Module Level 2 specification.

Mastering CSS rotateY(): A Complete Guide to 3D Horizontal Rotation — Source: css-tricks.com

To visualize, picture a pin stuck through the top and bottom of an element, allowing only horizontal rotation. Positive angles rotate the right edge away from you (turning the element to the right), while negative angles rotate the left edge away (turning left).

.demo-element {
  transform: rotateY(var(--deg));
  transition: transform 0.3s ease;
}

Syntax and Angle Units

The rotateY() function accepts a single angle argument:

rotateY( <angle> )

You can express the angle using four different units:

deg (degrees): 1/360 of a full circle. Example: rotateY(90deg) rotates 90° to the right.
grad (gradians): 1/400 of a full circle. Less common but valid.
rad (radians): Based on the circle's radius. 1 radian ≈ 57.3°, and a full circle is 2π rad (~6.2832 rad). Example: rotateY(1.57rad) ≈ 90°.
turn: One turn = 360°. Half a turn is 0.5turn (180°).

Here are some practical examples:

rotateY(-90deg) — rotates 90° to the left
rotateY(1turn) — performs a full 360° spin
rotateY(-0.25turn) — rotates 90° to the left

Understanding the Angle Direction

When the angle is positive, the element's right side moves away from the viewer, giving a rightward tilt. A negative angle makes the left side recede, tilting left. This mimics the natural perspective of an object rotating on a vertical axis.

Setting Up Perspective for True 3D Effects

Without additional setup, rotateY() will appear flat—the element simply shrinks in width. To see true three‑dimensional depth, you must apply a perspective property to the parent element. The perspective defines the distance between the viewer and the object’s z‑plane.

.parent {
  perspective: 1000px;
}

.card {
  transform: rotateY(45deg);
}

A lower value (e.g., 400px) makes the 3D effect more pronounced—the element appears closer and more sharply tilted. A higher value (e.g., 2000px) reduces the visual intensity, making the rotation look subtler.

Compare the difference: without perspective, the rotated element looks compressed and two‑dimensional. With perspective, it gracefully tilts right, revealing a sense of depth.

Practical Use Cases for rotateY()

Developers commonly use rotateY() to create:

Card flip animations: A card that rotates to show its back face on hover or click.
3D carousels: Rotating a set of elements around a central axis.
Interactive navigation menus: Buttons that tilt when hovered, adding tactile feedback.
Loading spinners: A continuous 360° spin using @keyframes.

Remember to combine rotateY() with transform-style: preserve-3d on child elements if they also need to maintain 3D positioning.

Browser Support and Accessibility

The rotateY() function works in all modern browsers. For older ones, consider a fallback like -webkit-transform: rotateY(). Because the function creates visual depth, keep motion preferences in mind: some users may experience dizziness with strong 3D transforms. Use the prefers-reduced-motion media query to offer a static or simplified alternative.

Tags: