deg
Degrees: a full turn is 360deg.
Safe to useBaseline: widely available
| Browser | Since |
|---|---|
| Chrome | 2+ |
| Chrome Android | 18+ |
| Edge | 12+ |
| Firefox | 3.6+ |
| Firefox Android | 4+ |
| Safari | 4+ |
| Safari iOS | 3.2+ |
Formula 360deg = 400grad = 2π rad = 1turn
How it works
A degree is 1/360 of a full circle. In transforms a positive angle turns clockwise as it appears on the screen: rotate(90deg) tips the top edge of an element toward the right. The numbers can be read without a calculator, which makes deg the default for rotation, skew and gradient directions.
Angles outside 0 to 360 are legal, and the difference shows in motion. Between two rotate() values the browser interpolates the number itself and does not take the shortest way round. An animation from rotate(0deg) to rotate(720deg) spins twice and is already at 180deg a quarter of the way through. Written as a fixed value, 360deg and 0deg look the same, so a stylesheet can appear fine and still spin when a transition lands on the larger one.
Reach for deg for angles a person picks by eye, such as a 45deg stripe or a 15deg tilt.
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
Rotations, gradient directions and hue angles that people read and edit by hand.
Watch out
A bare number is not an angle inside transform functions, except 0: rotate(45) is invalid and the whole declaration is dropped. Write rotate(45deg).
Before
.arrow {
rotate: 45;
}After
.arrow {
rotate: 45deg;
}