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.…