<angle>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

<angle> CSS 数据类型表示以度(degrees)、百分度(gradians)、弧度(radians)或圈数(turns)表示的角度值。例如,它在 <gradient>transform 的某些函数中被使用。

尝试一下

语法

<angle> 数据类型由 <number> 后跟以下列出的单位之一组成。与所有尺寸一样,数字与单位之间没有空格。数字 0 后的单位是可选的。

此外,它前面可以加上一个 +- 号。正数表示顺时针角度,而负数表示逆时针角度。对于给定单位的静态属性,任何角度都可以用各种等价值来表示。例如,90deg 等于 -270deg1turn 等于 4turn。对于动态属性,比如应用 animationtransition 时,效果却会有所不同。

单位

deg

度(角)为单位表示角度。一个完整的圆是 360deg。例:0deg90deg14.23deg

grad

百分度为单位表示角度。一个完整的圆是 400grad。例:0grad100grad38.8grad

rad

弧度为单位表示角度。一个完整的圆是 2π 弧度,约等于 6.2832rad1rad 是 180/π 度。例:0rad1.0708rad6.2832rad

turn

以圈数为单位表示角度。一个完整的圆是 1turn。例:0turn0.25turn1.2turn

示例

设置顺时针的直角

通过从最顶部点移动到最右侧点,沿圆顺时针旋转 90 度的示意图。 90deg = 100grad = 0.25turn ≈ 1.5708rad

设置平角

通过从最顶部点移动到最底部点,沿圆顺时针旋转 180 度的示意图。 180deg = 200grad = 0.5turn ≈ 3.1416rad

设置逆时针直角

通过从最顶部点移动到最左侧点,沿圆逆时针旋转 90 度的示意图。 -90deg = -100grad = -0.25turn ≈ -1.5708rad

设置零角

显示 0 度旋转的示意图,没有转动。 0 = 0deg = 0grad = 0turn = 0rad

规范

Specification
CSS Values and Units Module Level 4
# angles

浏览器兼容性

参见