rotateY() CSS Function

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

Description

The CSS rotateY() function is used to rotate an element around the vertical (y) axis without deforming it. It is one of the three 3D rotation functions in CSS, along with rotateX() and rotateZ().

The rotateY() function takes a single parameter, which is the angle of rotation in degrees. If the angle is positive, the element will be rotated clockwise. If the angle is negative, the element will be rotated counter-clockwise.

To use the rotateY() function, simply add it to the transform property of the element you want to rotate. For example, the following CSS will rotate a div element 90 degrees clockwise around the vertical axis:

div {
  transform: rotateY(90deg);
}

The rotateY() function can be used to create a variety of effects, such as rotating a 3D object, creating a carousel, or simply adding a bit of visual interest to your page.

Here are some examples of how to use the rotateY() function:

/* Rotate a div element 90 degrees clockwise around the vertical axis */
div {
  transform: rotateY(90deg);
}

/* Rotate a carousel element 180 degrees clockwise around the vertical axis */
.carousel {
  transform: rotateY(180deg);
}

/* Rotate a 3D object 45 degrees clockwise around the vertical axis */
.three-d-object {
  transform: rotateY(45deg);
}

The rotateY() function is a powerful tool that can be used to create a variety of effects on your web pages. Be creative and experiment to see what you can come up with!

Syntax

transform: rotateY(<angle>);

Values

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

Example

<div class="normal rotated">Rotated</div>
<div class="normal">Not rotated</div>
.normal {
padding: 20px;
margin: 20px;
width: 120px;
background: #546D62;
color: white;
font-family: sans-serif;
}
.rotated {
transform: rotateY(45deg);
}

Browser Support

The following table will show you the current browser support for the CSS rotateY() function.

Desktop
Edge Chrome Firefox Opera Safari
1213.510.13.5
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
184113.212

Last updated by CSSPortal on: 7th October 2023