<angle>

Baseline 已广泛支持

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来，各浏览器均已提供此特性。

<angle> CSS 数据类型表示以度、梯度、弧度或圈数表示的角度值。它用于例如<gradient>和某些transform函数。

试一试

transform: rotate(45deg);

transform: rotate(3.1416rad);

transform: rotate(-50grad);

transform: rotate(1.75turn);

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    This box can rotate to different angles.
  </div>
</section>

#example-element {
  background-color: #0118f3;
  padding: 0.75em;
  width: 180px;
  height: 120px;
  color: white;
}

语法

<angle>数据类型由一个<number>后跟以下列出的其中一个单位组成。与所有尺寸一样，单位字面量和数字之间没有空格。在数字0之后，角度单位是可选的。

可选地，它前面可以有一个+或-号。正数表示顺时针角度，而负数表示逆时针角度。对于给定单位的静态属性，任何角度都可以用各种等效值表示。例如，90deg等于-270deg，1turn等于4turn。对于动态属性，例如应用animation或transition时，效果将仍然不同。

单位

deg: 表示以度为单位的角度。一个整圆是360deg。示例：0deg、90deg、14.23deg。
grad: 表示以梯度为单位的角度。一个整圆是400grad。示例：0grad、100grad、38.8grad。
rad: 表示以弧度为单位的角度。一个整圆是2π弧度，约等于6.2832rad。1rad是180/π度。示例：0rad、1.0708rad、6.2832rad。
turn: 表示以圈数为单位的角度。一个整圆是1turn。示例：0turn、0.25turn、1.2turn。