<angle>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015年7月⁩.

<angle> CSS 数据类型表示以度（degrees）、百分度（gradians）、弧度（radians）或圈数（turns）表示的角度值。例如，它在 <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。