rotate() | CSS-Tricks

"The CSS rotate() function spins an element either clockwise or counterclockwise in a 2D plane. It is one of many transform functions used in the property. For example, using rotate() we can rotate the hand around the clock: .seconds-hand { transform: rotate(var(--deg)); transform-origin: bottom center; }"

"The rotate() function accepts a single <angle> argument, which dictates the direction of its spin. A positive argument spins the element clockwise, while a negative argument spins the element counterclockwise. The <angle> type has four units to choose from: One degree is 1/360 of a full circle. One gradian is 1/400 of a full circle. A radian is the length of a circle's diameter around the shape's arc. One radian is 180deg, or 1/2 of a full circle. One full circle is 2π radians, which is equal to 6.2832rad or 360deg. One turn is one full circle. So, halfway around a circle is equal to .5turn, or 180deg."

"Also, rotate() spins the element around its center axis. To change the rotation point, we have to pass a specific point to the transform-origin property that'll serve as the axis of rotation. The rotate() function is the backbone of some of the basic animations you've most likely come across on, like switching from "+" to "x" when an accordion is opened. We can do that by rotating the "+" symbol by 45"

The CSS rotate() function rotates an element in a 2D plane either clockwise or counterclockwise. It is used as a transform function and can be applied with a single angle argument. Positive angles spin the element clockwise, while negative angles spin it counterclockwise. The angle can be expressed in degrees, gradians, radians, or turns, where one turn equals a full circle and 0.25turn equals a quarter turn. rotate() spins the element around its center axis by default, and transform-origin can change the rotation point. rotate() is used in common animations such as rotating a “+” symbol by 45 degrees when an accordion opens.

Read at CSS-Tricks