CSS rotate() Function – How to Rotate Elements in CSS
rotate() transforms an element by rotating it two-dimensionally around a fixed point.
Syntax of the CSS rotate()
Function
rotate()
accepts a single argument. Here is the syntax:
element { transform: rotate(angle);}
Note the following:
- The
rotate(angle)
function is equivalent torotate3d(0, 0, 1, angle)
orrotateZ(angle)
. - The
angle
argument specifies the element’s angle of rotation. angle
can be in degrees, gradians, radians, or turns.- An
angle
argument consists of a number followed by the unit you wish to use—for instance,45deg
. - Your browser’s writing direction determines the element’s direction of rotation.
- A positive angle will rotate the element clockwise in a left-to-right writing direction. But a negative angle will do a counterclockwise rotation.
- A positive angle will rotate the element counterclockwise in a right-to-left writing context. But a negative angle will do a clockwise rotation.
Examples of the CSS rotate()
Function
Below are some examples of how the CSS rotate()
function works.
How to do a zero-degree rotation in CSS
img { transform: rotate(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 rotate()
function to specify a zero-degree (0⁰) rotation for the image element.
How to do a 45-degree rotation in CSS
img { transform: rotate(45deg); 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 rotate()
function to specify a forty-five-degree (45⁰) rotation for the image element.
How to do a negative seventy-degree rotation in CSS
img { transform: rotate(-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 rotate()
function to specify a negative seventy-degree (70⁰) rotation for the image element.
CSS rotate()
Function vs. rotate
Property: What’s the Difference?
CSS rotate()
functions and CSS rotate
property provide two similar ways to specify rotation transformations.
The main differences between the two rotation techniques are as follows:
- The CSS
rotate
property allows rotating an element without using the CSStransform
property. - The CSS
rotate
property’s syntax is shorter than its function alternative. - The CSS
rotate
property saves you from remembering the specific order to position the transform functions. - Browsers calculate the transform functions’ matrix in the order you assigned them to the CSS
transform
property—from left to right. - Browsers calculate the
transform
properties’ matrix in the following transformation matrix order:translate
rotate
scale
Here’s an example:
Use CSS rotate
property to do a 45-degree rotation:
img { rotate: 45deg; /* Equivalent to a transform: rotate(45deg) property */ 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 rotate
property to specify a forty-five-degree (45⁰) rotation for the image element.