<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。