Positive angles represent clockwise angles, negative angles represent counterclockwise angles. Its syntax is a
<number> data type immediately followed by the unit (
turn). Like for any CSS dimension, there is no space between the unit literal and the number.
For static properties and a given unit, an angle can be represented by several values:
4turn represents the same final position. For dynamic properties, like applying a
transition on the
transform property, the effect will nevertheless be different.
The following units may be used:
degwhich represents an angle in degrees. One full circle is
gradwhich represents an angle in gradians. One full circle is
radwhich represents an angle in radians. One full circle is 2π radians which approximates to
1radis 180/π degrees. E.g.
turnwhich represents the number of turns the angle is. One full circle is
Even if all units represent the same time for the value
0, the unit may not be omitted in that case as it isn't a
0 is invalid and does not represent
A right angle:
|A flat angle:
|A right angle (towards the left):
A null angle:
Note: For zero angles the unit identifier is optional.
|CSS Values and Units Module Level 3
The definition of '<angle>' in that specification.
|Candidate Recommendation||Initial definition|
|Feature||Chrome||Edge||Firefox (Gecko)||Internet Explorer||Opera||Safari (WebKit)|
|Basic support||2 (528.17)||(Yes)||3.6 (1.9.2)||9.0||(Yes)||4.0 (528.17)|
|Feature||Android||Chrome||Edge||Firefox Mobile (Gecko)||IE Phone||Opera Mobile||Safari Mobile|
|Basic support||?||(Yes)||(Yes)||(Yes)||?||No support||?|
||No support||(Yes)||(Yes)||13.0||?||No support||No support|