rotateY() CSS Function
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 | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
|
12 | 1 | 3.5 | 10.1 | 3.5 |
Tablets / Mobile | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
18 | 4 | 11 | 3.2 | 1 | 2 |
Last updated by CSSPortal on: 7th October 2023