Rotate
Learn to rotate elements with rotate().
The rotate() function
rotate() turns an element around its transform origin. The unit is degrees: rotate(45deg) rotates the element 45 degrees clockwise.
The default origin is the centre of the element. To move that point you can use the transform-origin property. We cover it in the next step in detail.
Negative angle and direction
A negative angle rotates the element counter-clockwise. rotate(-45deg) turns it 45 degrees to the left. The sign sets the direction: positive is clockwise, negative is the opposite way.
rotate(360deg) makes a full turn; the picture ends up looking the same, yet the transform is still computed. That is why small angles usually do the job.
Rotation with transform-origin
Change the pivot with the transform-origin property. Set transform-origin: top left and apply rotate(45deg); the element swings from its top-left corner.
This gives a natural feel for a lid or a swinging tag. Moving the centre to other corners opens up many rotations; each corner gives a different motion.
Exercise Hover-driven rotation
Add two style blocks. First an .icon selector with transform: rotate(0deg). Second an .icon:hover selector with transform: rotate(90deg). The icon should rotate 90 degrees on hover.
Show example solution
/* add a transform for the icon */
.icon {
transform: rotate(0deg);
}
.icon:hover {
transform: rotate(90deg);
}Test yourself
-
What does rotate(90deg) do?
.tag { transform: rotate(90deg); }- Shifts the element 90 pixels right
- Rotates the element 90 degrees clockwise
- Grows the element by 90 pixels
- Moves the element 90 pixels up
Show answer
Rotates the element 90 degrees clockwise — Correct. rotate is an angular transform; it rotates 90 degrees clockwise.
-
Write the rotate angle
.tag { transform: rotate(____); }Show answer
.tag { transform: rotate(-30deg); } -
Match each angle to its direction
- rotate(45deg)
- 45° clockwise
- rotate(-45deg)
- 45° counter-clockwise
- rotate(180deg)
- Half turn
- rotate(360deg)
- Full turn