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; }

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( [ <angle> | <zero> ] )

Arguments

/* <angle> */ rotateZ(90deg) /* Rotates 90 degrees clockwise */ rotateZ(-180deg) /* Rotates 180 degrees counterclockwise */

/* <angle> in turns */ rotateZ(0.25turn) /* Rotates a quater turn clockwise. */ rotateZ(1turn) /* Rotates a full 360-degree turn. */

/* <angle> in radians */ rotateZ(1.57rad) /* Rotates ~90 degrees clockwise. */ rotateZ(-3.14rad) /* Rotate ~180 degrees counterclockwise.…