How to rotate an element using css. transform:rotate()

transform is a css property that allows you to transform an element, but in this article, I would like to focus on how to rotate an element.

About transform:rotate()

To handle rotation with transform, use rotate().
The rotation angle can be specified numerically.

transform:rotate(xxxdeg);

deg means something like “xx degrees”.

.item1{
   transform:rotate(45deg);
}

This will rotate the element 45 degrees with the center of the element as the base point.

Example

45 degree

If you want to rotate it semi-clockwise, use -.

.item2{
   transform:rotate(-45deg);
}

Rotate 45 degrees in a semi-clockwise direction.

-45 degree

How to set the reference point when rotating an element.

See this article on how to set the reference point for rotating elements.