CSS rotate() Function – How to Rotate Elements in CSS
rotate() transforms an element by rotating it two-dimensionally around a fixed point.
- "Transform origin" is the fixed point around which an element rotates.
- You can define your element's fixed point using the CSS
transform-origin
property. But the default iscenter
.
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
- CSS
- HTML
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
- CSS
- HTML
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
- CSS
- HTML
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:
- CSS
- HTML
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.
A none
value tells browsers not to rotate the selected element.
Overview
This article discussed what a CSS rotate()
function is. We also used examples to see how it works.