MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

这篇翻译不完整。请帮忙从英语翻译这篇文章

Summary

CSS数据类型<angle>代表着一个表示度数(degrees)、 百分度(gradians)、弧度(radians)或者转数(turns)的角度值。例如在rotateskew transform中它会被用到。

正数代表着顺时针的的角度,负数代表逆时针。对于一个给定单位的静态属性,相同的角度可以用任何不同的方法表示,比如90deg等于-270deg,1turn等于4turn。对于动态属性,比如将其用到transform属性上,并使用 transition添加动画效果,结果就会是不一样的。

单位

  • deg 角度单位,一个完整的圆为360度,如0deg, 90deg, 14.23deg.
  • grad 百分度单位,一个完整的圆为400grad.如0grad,100grad,38.8grad。
  • rad 弧度单位,一个完整的圈是2πrad,大概是6.2832rad。1rad是180/πdegrees(度)。如0rad,1.0708rad,6.2832rad。
  • turn 转单位,一个完整的圈是1turn。如0turn,0.25turn,1.2turn。

尽管所有的单位对于0都表示相同的值,这个单位可能不能省略,因为 <length>: 0是无效的,不代表0deg, 0grad, 0rad0turn。(这一段在我翻译之前存在,于是我翻译了,但是英文版本是不存在的,原来的中文版下面的note中提到了值为0时单位可以选择省略,在stackoverflow上没找到相关答案,如有错误望发送邮件到我的邮箱与我联系。)

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 = 0ra

Specifications

Specification Status Comment
CSS Values and Units Module Level 3
<angle>
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 ? 未实现 未实现

文档标签和贡献者

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