CSS rotateX() Function – How to Rotate Elements around X-axis
rotateX() transforms an element by rotating it three-dimensionally around the X-axis.
Syntax of the CSS rotateX()
Function
rotateX()
accepts a single argument. Here is the syntax:
element {
transform: rotateX(angle);
}
info
The rotateX(angle)
function is equivalent to rotate3d(1, 0, 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 rotateX()
Function
Below are some examples of how the CSS rotateX()
function works.
How to do a zero-degree rotation around the X-axis
- CSS
- HTML
img {
transform: rotateX(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 rotateX()
function to specify a zero-degree (0⁰) rotation for the image around the X-axis.
How to do a 70-degree rotation around the X-axis
- CSS
- HTML
img {
transform: rotateX(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 rotateX()
function to specify a seventy-degree (70⁰) rotation for the image around the X-axis.
Overview
This article discussed what a CSS rotateX()
function is. We also used examples to see how it works.