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。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

CSS <angle> - deg

以下示例演示了属性 transform: rotate(60deg) 将框旋转 60deg：

Open Compiler

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

Open Compiler

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

Open Compiler

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

Open Compiler

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

打印页面