<angle>
<angle>
The <angle>
CSS data type represents angle values. It is used, for example, in rotate
and skew
transform
s.
Positive angles represent clockwise angles, negative angles represent counterclockwise angles. Its syntax is a <number>
data type immediately followed by the unit (deg
, grad
, rad
or 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: 90deg
and -270deg
, or 1turn
and 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:
-
deg
which represents an angle in degrees. One full circle is360deg
. E.g.0deg
,90deg
,360deg
. -
grad
which represents an angle in gradians. One full circle is400grad
. E.g.0grad
,100grad
,400grad
. -
rad
which represents an angle in radians. One full circle is 2π radians which approximates to6.2832rad
.1rad
is 180/π degrees. E.g.0rad
,1.0708rad
,6.2832rad
. -
turn
which represents the number of turns the angle is. One full circle is1turn
. E.g.0turn
,0.25turn
,1turn
.
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 <length>
: 0
is invalid and does not represent 0deg
, 0grad
, 0rad
or 0turn
.
Examples
A right angle: | |
A flat angle: 180deg = 200grad = 0.5turn ≈ 3.1416rad
| |
A right angle (towards the left): -90deg = -100grad = -0.25turn ≈ -1.5708rad
| |
A null angle:
Note: For zero angles the unit identifier is optional. |
Specifications
Specification | Status | Comment |
---|---|---|
CSS Values and Units Module Level 3 The definition of '<angle>' in that specification. | Candidate Recommendation | Initial definition |
Browser compatibility
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) |
turn unit | (Yes) | (Yes) | 13.0 | 9.0 | (Yes) | 10 |
Feature | Android | Chrome | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|---|
Basic support | ? | (Yes) | (Yes) | (Yes) | ? | No support | ? |
turn unit | No support | (Yes) | (Yes) | 13.0 | ? | No support | No support |
© 2005–2017 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/angle