CSS rotateY() Function

CSS rotateY() Function

The CSS rotateY() function rotates an element around the vertical Y axis in three-dimensional space.

It is used with the transform property and accepts an angle that determines the amount of rotation. Combined with perspective, it can create horizontally flipping cards, turning panels, and other three-dimensional effects.

Syntax

transform: rotateY(angle);

The rotateY() function accepts one angle value.

For example:

transform: rotateY(30deg);
transform: rotateY(-45deg);
transform: rotateY(0.25turn);
transform: rotateY(1rad);
transform: rotateY(100grad);

The function returns a CSS <transform-function> value.

It is equivalent to a rotate3d() rotation using the axis vector (0, 1, 0).

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

Both declarations produce the same rotation.

Parameters

The rotateY() function accepts one required parameter.

For example:

transform: rotateY(60deg);

This rotates the element 60 degrees around its vertical Y axis.

Positive, negative, and zero angles are supported. A unitless zero is also accepted where an angle is expected.

How It Works

The Y axis runs vertically through the element. The rotateY() function rotates the element around this axis, causing its left and right edges to move in opposite directions through three-dimensional space.

For example:

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

The element turns around its vertical axis by 45 degrees.

By default, the axis passes through the center of the element, as determined by transform-origin.

Without perspective, the element appears horizontally compressed as it turns. Adding perspective creates a more realistic sense of depth.

The transformation changes the element's rendered appearance without changing its original layout space.

Angle Units

The rotateY() function supports four CSS angle units.

For example, these declarations represent the same quarter-turn rotation:

transform: rotateY(90deg);
transform: rotateY(0.25turn);
transform: rotateY(100grad);
transform: rotateY(1.570796rad);

Degrees are commonly used for turning and flipping effects, while turns are convenient for complete revolutions.

Positive and Negative Rotations

Positive and negative angles rotate the element in opposite directions around the Y axis.

For example:

.positive {
  transform: rotateY(45deg);
}
.negative {
  transform: rotateY(-45deg);
}

With a positive angle, the right edge moves away from the viewer and the left edge moves toward the viewer, assuming the default viewing orientation.

A negative angle reverses that movement.

A value of 0deg produces no rotation:

transform: rotateY(0deg);

Angles greater than one complete revolution are also valid:

transform: rotateY(450deg);

The final orientation is equivalent to rotateY(90deg), although the additional revolution can affect animation behavior.

Perspective

Perspective creates a sense of depth when an element rotates around the Y axis.

The perspective property can be applied to a parent element:

.scene {
  perspective: 600px;
}
.box {
  transform: rotateY(45deg);
}

The parent establishes a perspective view for its transformed children.

Perspective can also be added directly using the perspective() transform function:

.box {
  transform: perspective(600px) rotateY(45deg);
}

Smaller positive perspective distances create stronger depth effects, while larger distances create a flatter appearance.

For example:

.strong-depth {
  transform: perspective(250px) rotateY(45deg);
}
.subtle-depth {
  transform: perspective(1000px) rotateY(45deg);
}

The perspective property and perspective() function have different application rules and may produce different results in complex layouts.

Perspective is optional, but it makes the three-dimensional rotation easier to recognize.

Transform Origin

The transform-origin property controls the point around which the element rotates.

By default, the rotation axis passes through the center of the element.

For example:

.box {
  transform: rotateY(45deg);
  transform-origin: center;
}

Changing the horizontal origin creates different turning effects.

For example:

.left-hinge {
  transform: rotateY(45deg);
  transform-origin: left center;
}
.right-hinge {
  transform: rotateY(45deg);
  transform-origin: right center;
}
.custom-origin {
  transform: rotateY(45deg);
  transform-origin: 25% 50%;
}

The first example rotates around the left edge, while the second rotates around the right edge.

A third value can specify a Z-axis offset:

.depth-origin {
  transform: rotateY(45deg);
  transform-origin: center center 40px;
}

The third value must be a length, not a percentage.

Changing the origin is useful for creating door-like rotations and hinged panels.

Backface Visibility

The backface-visibility property controls whether the reverse side of an element is visible when it faces the viewer.

For example:

.box {
  transform: rotateY(180deg);
  backface-visibility: hidden;
}

At 180 degrees, the back of the element faces the viewer. With backface-visibility: hidden, that side is not painted.

The default value is visible:

.box {
  transform: rotateY(180deg);
  backface-visibility: visible;
}

With the default setting, the reverse side remains visible, although text may appear mirrored.

For two-sided card effects, separate front and back elements can be positioned together and rotated in opposite orientations.

Use backface-visibility: hidden when only the face directed toward the viewer should be displayed.

Preserving 3D Space

The transform-style property determines whether an element's transformed descendants retain their three-dimensional positions.

For example:

.scene {
  perspective: 700px;
}
.group {
  transform-style: preserve-3d;
  transform: rotateY(35deg);
}
.group-child {
  transform: translateZ(50px);
}

The preserve-3d value allows the child to remain positioned along the Z axis within the three-dimensional scene.

The default value, flat, flattens descendants into the parent's plane.

Some properties, including certain clipping and opacity settings, can force a flattened rendering context.

For a single element rotated with rotateY(), transform-style: preserve-3d is usually unnecessary.

Combining Transforms

The rotateY() function can be combined with other transform functions.

For example:

.box {
  transform: perspective(600px) rotateY(35deg) translateX(20px);
}

This combines perspective, rotation, and translation.

The order of transform functions matters because transformations are composed in the order written.

For example:

.first {
  transform: translateX(40px) rotateY(45deg);
}
.second {
  transform: rotateY(45deg) translateX(40px);
}

These declarations generally produce different results.

In the second example, the translation follows the rotated coordinate system, affecting the element's final position in three-dimensional space.

Multiple rotations can also be combined:

.box {
  transform: rotateY(30deg) rotateX(20deg);
}

This applies rotations around both the Y and X axes. Changing their order can change the resulting orientation.

rotateY() vs. Other Rotation Functions

CSS provides several rotation functions for different axes.

For example, these declarations are equivalent:

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

Use rotateY() for rotation around the vertical axis. Use rotate3d() when the rotation axis must combine multiple directions.

Example

This example demonstrates positive and negative rotations around the Y axis.

HTML:

<div class="rotatey-demo">
  <div class="rotatey-demo-stage">
    <div class="rotatey-demo-box rotatey-demo-positive">45deg</div>
  </div>
  <div class="rotatey-demo-stage">
    <div class="rotatey-demo-box rotatey-demo-negative">-45deg</div>
  </div>
  <div class="rotatey-demo-stage">
    <div class="rotatey-demo-box rotatey-demo-steep">70deg</div>
  </div>
</div>

CSS:

.rotatey-demo {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  padding: 25px 15px;
  background-color: #f1f3f5;
}
.rotatey-demo-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 140px;
  perspective: 500px;
  border: 1px dashed #999999;
}
.rotatey-demo-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 95px;
  height: 95px;
  background-color: #0066cc;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
}
.rotatey-demo-positive {
  transform: rotateY(45deg);
}
.rotatey-demo-negative {
  transform: rotateY(-45deg);
}
.rotatey-demo-steep {
  transform: rotateY(70deg);
}

The first and second boxes rotate in opposite directions, while the third uses a steeper rotation angle.

Each container provides perspective so the three-dimensional effect is visible.

Perspective Example

This example compares the same Y-axis rotation with and without perspective.

HTML:

<div class="rotatey-perspective-demo">
  <div class="rotatey-perspective-stage rotatey-perspective-flat">
    <div class="rotatey-perspective-box">No Perspective</div>
  </div>
  <div class="rotatey-perspective-stage rotatey-perspective-depth">
    <div class="rotatey-perspective-box">Perspective</div>
  </div>
</div>

CSS:

.rotatey-perspective-demo {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 25px;
  padding: 25px 15px;
  background-color: #f1f3f5;
}
.rotatey-perspective-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 180px;
  height: 160px;
  border: 1px dashed #999999;
}
.rotatey-perspective-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 110px;
  height: 100px;
  padding: 5px;
  background-color: #008577;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
  transform: rotateY(55deg);
}
.rotatey-perspective-flat {
  perspective: none;
}
.rotatey-perspective-depth {
  perspective: 300px;
}

Both boxes use rotateY(55deg), but the second container adds perspective.

Without perspective, the box appears compressed horizontally. With perspective, the left and right portions appear at different depths, creating a more realistic turning effect.

Transitions and Animations

The rotateY() function can be animated using CSS transitions and keyframes.

For example, a hover effect:

.rotatey-hover {
  transition: transform 0.4s ease;
}
.rotatey-hover:hover {
  transform: rotateY(25deg);
}

For a continuous Y-axis rotation:

@keyframes rotatey-spin {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}
.rotatey-spinner {
  animation: rotatey-spin 3s linear infinite;
}

The animation rotates the element through one complete revolution every three seconds.

A parent element can provide perspective:

.rotatey-scene {
  perspective: 600px;
}

For accessibility, respect reduced-motion preferences:

@media (prefers-reduced-motion: reduce) {
  .rotatey-spinner {
    animation: none;
  }
}

For interactive effects, transitions are often more appropriate than continuous animations.

Common Uses

The rotateY() function is useful for three-dimensional effects involving horizontal turning or flipping around a vertical axis.

For example:

.tilted-card {
  transform: perspective(700px) rotateY(15deg);
}
.opening-panel {
  transform-origin: left center;
  transform: rotateY(-60deg);
}
.flipped-element {
  transform: rotateY(180deg);
}

These examples demonstrate a tilted card, a hinged panel, and a half-turn around the Y axis.

Limitations

The rotateY() function has several important rules and considerations.

• It accepts one CSS angle value.
• Nonzero angles require a valid unit such as deg, rad, grad, or turn.
• It rotates only around the Y axis.
• Perspective is not automatically applied.
• It does not change the element's original layout space.
• Rotated elements may overlap surrounding content or extend beyond their containers.
• At a quarter-turn, a flat element may appear edge-on and become difficult to see.
• The reverse side may become visible during rotations greater than 90 degrees.
• The order of combined transform functions affects the final result.
• Nonessential animations should respect reduced-motion preferences.

For example, this is valid:

transform: rotateY(45deg);

The following is also valid and produces no rotation:

transform: rotateY(0);

The following is invalid because the nonzero angle has no unit:

transform: rotateY(45);

The following is invalid because the function accepts only one argument:

transform: rotateY(30deg, 60deg);

Use a valid angle and add perspective when a stronger three-dimensional appearance is needed.

Browser Support

The CSS rotateY() function is Baseline Widely available and is supported by modern versions of Chrome, Edge, Firefox, Safari, and other major browsers.

It does not require vendor prefixes in modern browsers.

For example:

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

A two-dimensional fallback can be provided for older browsers:

.box {
  transform: rotate(10deg);
  transform: rotateY(45deg);
}

Browsers that support rotateY() use the second declaration. Browsers that do not recognize it can retain the earlier two-dimensional rotation.

For current compatibility information, visit Can I Use? and search for CSS 3D transforms.

Specifications

The rotateY() function is defined in the CSS Transforms Module Level 2 .

The specification defines three-dimensional rotation functions, perspective, and related transform behavior.

Related CSS functions include rotate(), rotate3d(), rotateX(), rotateZ(), and perspective().