The <angle> CSS data type represents angle values. 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.


  • deg 角度单位,一个完整的圆为360度,如0deg, 90deg, 360deg.
  • grad 梯度单位,一个完整的圆为400grad
  • rad 弧度单位,360deg = 2π rad
  • turn 转,一圈即为一转,常用于描述发动机转数,1turn = 360deg = 2π rad

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.



A right angle: 90deg = 100grad = 0.25turn 1.5708rad

Angle180.png A flat angle: 180deg = 200grad = 0.5turn 3.1416rad
AngleMinus90.png A right angle (towards the left): -90deg = -100grad = -0.25turn -1.5708rad

A null angle: 0 = 0deg = 0grad = 0turn = 0rad

Note: For zero angles the unit identifier is optional.


Specification Status Comment
CSS Values and Units Module Level 3
Candidate Recommendation Initial definition

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 2 (528.17) 3.6 (1.9.2) 9.0 未实现 4.0 (528.17)
turn unit (Yes) 13.0 9.0 未实现 未实现
Feature Android Chrome Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? (Yes) (Yes) ? 未实现 ?
turn unit 未实现 (Yes) 13.0 ? 未实现 未实现


 此页面的贡献者: MonsterOOF, zhichao
 最后编辑者: MonsterOOF,