Angles appear in rotations, skews, color hues, gradient directions and trigonometric functions (Numerical Functions). The table also covers the time and resolution units of the next two subsections.
| Type | Units | Conversions |
|---|---|---|
| <angle> | deg, grad, rad, turn | 1turn = 360deg = 400grad = 2π rad |
| <time> | s, ms | 1s = 1000ms |
| <resolution> | dpi, dpcm, dppx, x | 1dppx = 1x = 96dpi ≈ 37.8dpcm |
<style>
div { display: inline-block; width: 50px; height: 50px; margin: 14px 12px;
background: linear-gradient(90deg, #ef6c00 50%, #e3f2fd 50%); }
</style>
<div style="rotate: 90deg"></div>
<div style="rotate: 100grad"></div>
<div style="rotate: 1.5708rad"></div>
<div style="rotate: 0.25turn"></div>
Positive angles turn clockwise, and gradient directions are compass bearings: 0deg points up and 90deg right, unlike the counter-clockwise angles of mathematics. Each square holds a left-to-right 90deg gradient; after a quarter turn its orange half sits on top.
Pick the unit that reads best: turn for whole rotations (rotate: 2.5turn), deg for everything else. rad is mainly useful when you copy numbers from JavaScript, whose Math.sin() expects radians.