rotate()

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 transform property. For example, using rotate() we can rotate the hand around the clock: .seconds-hand { transform: rotate(var(--deg)); transform-origin: bottom center; } CodePen Embed Fallback For rotating elements tri-dimensionally, consider using rotateX() and rotateY() . The rotate() functions is defined in the CSS Transforms Module Level 1 specification. Syntax rotate() = rotate( [ | ] ) Arguments /* */ rotate(90deg) /* Rotates 90 degrees clockwise */ rotate(-180deg) /* Rotates 180 degrees counterclockwise */ /* in turns */ rotate(0.25turn) /* Rotates a quater turn clockwise. */ rotate(1turn) /* Rotates a full 360-degree turn. */ /* in radians */ rotate(1.57rad) /* Rotates ~90 degrees clockwise. */ rotate(-3.14rad) /* Rotate ~180 degrees counterclockwise. */ The rotate() function accepts a single argument, which dictates the direction of its spin. A positive argument spins the element clockwise, while a negative argument spins the element counterclockwise. The type has four units to choose from: deg : One degree is 1/360 of a full circle. grad : One gradian is 1/400 of a full circle. rad : 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 . turn : 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. Basic usage 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 “+