<angle>

<angle>

The <angle> CSS data type represents angle values. It is used, for example, in rotate and skew transforms.

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 is 360deg. E.g. 0deg, 90deg, 360deg.
  • grad which represents an angle in gradians. One full circle is 400grad. E.g. 0grad, 100grad, 400grad.
  • rad which represents an angle in radians. One full circle is 2π radians which approximates to 6.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 is 1turn. 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

Angle90.png

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
Angle0.png

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

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

在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号

意见反馈
返回顶部