👻 Check our latest review to choose the best laptop for Machine Learning engineers and Deep learning tasks!
The CSS rotate () function distorts an element by a certain number of degrees. You can rotate an element clockwise using a positive number of degrees. Or you can rotate an item counterclockwise using a negative number.
Today we are going to learn how to rotate elements with CSS. Why rotate an element? Rotating elements make your web page more interactive. Used correctly, a rotating element will add to the aesthetics of your site.
While reading this article, please refer to companion repository , so you can see the concepts in action. Knowing how to rotate an element will be a great addition to your CSS toolbox.
CSS rotate ()
The CSS rotate () function allows you to rotate an element on a 2D axis. The rotate () function takes one argument: the angle at which you want to rotate your web element. You can rotate an element clockwise or counterclockwise.
Let’s look at the syntax of the rotate () function:
The "angle" value represents the number of degrees the element should rotate. You can specify a clockwise rotation using a positive number of degrees (for example 45). Or you can rotate in the opposite direction using a negative degree value (eg -39).
The rotate () function can be applied to any HTML element. For example, you can rotate a paragraph of text. Or you can rotate an image.
An HTML rotation appears as soon as you render the page, so there is no visible rotation. To see the rotation in action, you need to use a CSS transition . Transitions change the state of an element when an action is taken, such as when a cursor hovers over an element.