CSS 資料型別 - <angle>

CSS <angle> 資料型別定義了一個角度值，以度、梯度、弧度或圈為單位進行測量。此屬性用於漸變和一些變換函式。

可能的值

<number> − 數字可以是正值或負值。

語法

<angle> = number;

需要考慮以下幾點

<angle> 資料型別包括一個 <number> 後跟以下單位之一（如表中所列）。
單位和數字之間不允許有空格。
在數字 0 後可選包含角度單位。
角度前面可以帶一個 + 或 - 符號，其中正數表示順時針方向，負數表示逆時針方向。
靜態單位屬性可以具有等效的角度（例如，90deg 等於 -270deg），但動態屬性（如動畫或過渡）的效果可能有所不同。

下表列出了可用於測量角度的不同單位：

單位	描述
deg	它表示以度為單位測量的角度，範圍為 0 到 360deg。一個完整的圓等於 360deg。
grad	它表示以梯度為單位測量的角度，範圍為 0 到 400grad。一個完整的圓等於 400grad。
rad	它表示以弧度為單位測量的角度。一個完整的圓等於 2π 弧度，約為 6.2832rad。
turn	它表示以圈數為單位測量的角度。一個完整的圓等於 1turn。

CSS <angle> - deg

以下示例演示了屬性 transform: rotate(60deg) 將框旋轉 60deg：

<html>
<head>
<style>
   div { 
      height: 100px;
      width: 100px;
      border: 2px solid blue;
      margin: 20px;
      transform: rotate(60deg);
   }
</style>
</head>
<body>
   <div>
      The box rotate by 60deg.
   </div>
</body>
</html>

CSS <angle> - grad

以下示例演示了屬性 transform: rotate(-45grad) 將框旋轉 -45deg：

<html>
<head>
<style>
   div { 
      height: 100px;
      width: 100px;
      border: 2px solid blue;
      margin: 20px;
      transform: rotate(-45grad);
   }
</style>
</head>
<body>
   <div>
      The box rotate by -45grad.
   </div>
</body>
</html>

CSS <angle> - rad

以下示例演示了屬性 transform: rotate(3.1416rad) 將框旋轉 3.1416rad：

<html>
<head>
<style>
   div { 
      height: 100px;
      width: 100px;
      border: 2px solid blue;
      margin: 20px;
      transform: rotate(3.1416rad);
   }
</style>
</head>
<body>
   <div>
      The box rotate by 3.1416rad.
   </div>
</body>
</html>

CSS <angle> - turn

以下示例演示了屬性 transform: rotate(1.75turn) 將框旋轉 1.75turn：

<html>
<head>
<style>
   div { 
      height: 100px;
      width: 100px;
      border: 2px solid blue;
      margin: 20px;
      transform: rotate(1.75turn);
   }
</style>
</head>
<body>
   <div>
      The box rotate by 1.75turn.
   </div>
</body>
</html>

列印頁面