CSS rotate() Function – How to Rotate Elements in CSS
rotate() transforms an element by rotating it two-dimensionally around a fixed point.
note
- 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);
}
info
The rotate(angle)
function is equivalent to rotate3d(0, 0, 1, angle)
or rotateZ(angle)
.
Note the following:
- 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.
Overview
This article discussed what a CSS rotate()
function is. We also used examples to see how it works.