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