turn
One turn is a full rotation.
Safe to useBaseline: widely available
| Browser | Since |
|---|---|
| Chrome | 2+ |
| Chrome Android | 18+ |
| Edge | 12+ |
| Firefox | 13+ |
| Firefox Android | 14+ |
| Safari | 4+ |
| Safari iOS | 3.2+ |
Formula 1turn = 360deg = 400grad = 2π rad
How it works
1turn is a full circle, 0.5turn a half and 0.25turn a right angle. It reads like the thing it describes: rotate(1turn) is one complete rotation and a looping spinner can move from 0turn to 1turn without anyone counting to 360.
Division gives clean answers for items spread evenly around a ring. Seven items go at calc(var(--i) / 7 * 1turn), not at 51.4285714deg, and calc(1turn / 3) produces exactly the same transform as 120deg. The browser does the rounding, not the author.
The unit also keeps animation intentions legible. From 0turn to 3turn is three full spins, a number you can count, where 1080deg needs a division. Use turn for anything defined as a share of a circle and deg for angles measured by eye.
Try it
Convert angles, time and resolution
Pick a unit and a value. The other units of the same kind are shown, and an angle turns the square.
deg- 90
grad- 100
rad- 1.5708
turn- 0.25
Your screen:
The same as a table
| Kind | Equal to |
|---|---|
| A right angle | 0.25turn, 90deg, 100grad, 1.5708rad |
| A duration | 1s, 1000ms |
| A resolution | 1dppx, 1x, 96dpi, 37.795dpcm |
Reach for it when
Spinners, loops and simple fractions of a circle.
Watch out
Rotations beyond 1turn are valid and spin more than once in an animation: 2.5turn ends at half a turn after two full spins, but a static 2.5turn looks like 0.5turn.
@keyframes spin {
to { rotate: 1turn; }
}