rotateY() 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 rotateY() CSS function is part of the 3D transform functions in CSS, used to rotate an element around its vertical Y-axis. When applied, the element appears to spin left or right in 3D space, giving the illusion of depth on the screen. Unlike rotateX(), which rotates along the horizontal axis, rotateY() rotates the element from side to side, making one side appear closer or farther depending on the rotation angle.

This function is often used together with the transform property to animate or adjust elements dynamically. For instance, combining rotateY() with transition allows smooth flipping effects on elements like div or img tags. It is also commonly paired with perspective on a parent element to create a more realistic 3D appearance.

A simple example:

.card {
  width: 200px;
  height: 300px;
  background-color: #f0f0f0;
  transform: rotateY(180deg);
  transition: transform 0.6s;
}

.card:hover {
  transform: rotateY(0deg);
}

In this example, a card element initially shows its back side and rotates to reveal the front side when hovered. Using rotateY() is particularly effective for interactive UI components like flipping cards, 3D menus, or image galleries, giving a modern, engaging feel.

Syntax

transform: rotateY(<angle>);

Values

<angle>A positive value rotates the element clockwise, a negative value rotates the element counter clockwise.

Example

HTML

<div class="container">

  <div class="box">

    ROTATE ME

  </div>

</div>

CSS

/* The container provides the 3D depth */

.container {

  width: 200px;

  height: 200px;

  border: 2px dashed #ccc;

  perspective: 500px; 

  margin: 50px;

}



/* The element being rotated */

.box {

  width: 100%;

  height: 100%;

  background-color: #3498db;

  color: white;

  display: flex;

  align-items: center;

  justify-content: center;

  font-family: sans-serif;

  font-weight: bold;

  transition: transform 0.5s; /* Smooth animation */

  

  /* Initial Rotation */

  transform: rotateY(45deg);

}



/* Rotate further when you hover over it */

.container:hover .box {

  transform: rotateY(180deg);

}

Result

Editor

Browser Support

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