CSS rotateY() Function – How to Rotate Elements around Y-axis
rotateY() transforms an element by rotating it three-dimensionally around the Y-axis.
Syntax of the CSS rotateY()
Function
rotateY()
accepts a single argument. Here is the syntax:
element {
transform: rotateY(angle);
}
info
The rotateY(angle)
function is equivalent to rotate3d(0, 1, 0, angle)
.
Note the following:
- The
angle
argument specifies the element's angle of rotation. angle
can be in degree, gradian, radian, or turn.- An
angle
argument consists of a number followed by the unit you wish to use—for instance,45deg
.
Examples of the CSS rotateY()
Function
Below are some examples of how the CSS rotateY()
function works.
How to do a zero-degree rotation around the Y-axis
- CSS
- HTML
img {
transform: rotateY(0deg);
width: 80%;
}
<img
src="https://cdn.pixabay.com/photo/2022/09/26/23/26/african-american-7481724_960_720.jpg"
alt=""
/>
The snippet above used the rotateY()
function to specify a zero-degree (0⁰) rotation for the image around the Y-axis.
How to do a 70-degree rotation around the Y-axis
- CSS
- HTML
img {
transform: rotateY(70deg);
width: 80%;
}
<img
src="https://cdn.pixabay.com/photo/2022/09/26/23/26/african-american-7481724_960_720.jpg"
alt=""
/>
The snippet above used the rotateY()
function to specify a seventy-degree (70⁰) rotation for the image around the Y-axis.
Overview
This article discussed what a CSS rotateY()
function is. We also used examples to see how it works.