Course Recommendation:

CSS rotateY() Function

Definition and Usage rotateY() CSS

rotateY() The function defines the 3D rotation of the element around the y-axis (vertical direction). transform Used in properties.

Example

Example 1

Using rotateY() Rotate multiple <div> elements around the y-axis (vertical direction):

#myDiv1 {
  transform: rotateY(40deg);
}
#myDiv2 {
  transform: rotateY(60deg);
}
#myDiv3 {
  transform: rotateY(80deg);
}

Try It Yourself

Example 2

Using rotateY() Rotate images around the y-axis (vertical direction):

#img1 {
  transform: rotateY(40deg);
}
#img2 {
  transform: rotateY(60deg);
}
#img3 {
  transform: rotateY(80deg);
}

Try It Yourself

CSS Syntax

rotateY(angle)

Technical Details

Browser Support

The numbers in the table represent the first browser version to fully support this function.

Related Pages

Tutorial:CSS 3D Transformation

Referenz:CSS transform Eigenschaft

Referenz:CSS rotate Eigenschaft

Referenz:CSS rotate() Funktion

Referenz:CSS rotate3d() Funktion

Referenz:CSS rotateX() Funktion

Referenz:CSS rotateZ() Funktion