CSS 数据类型

CSS <angle> 数据类型定义以度、百分度、弧度或圈为单位测量的角度值。此属性用于gradients和一些transform函数.

可能的值

  • <number> - 数字可以有正值或负值。

语法

<angle> = number;

需要注意以下几点:

  • <angle> 数据类型包括 <number> 和后跟以下单位之一（如表中所列）。

  • 单位和数字之间不允许有空格。

  • 可以选择在数字 0 后面包含角度单位。

  • 角度前面可以有一个 + 或 - 符号，正数表示顺时针方向，负数表示逆时针方向。

  • 静态单位属性可以具有等效角度（例如，90 度相当于 -270 度），但动态属性（例如动画或过渡）的效果可能会有所不同。

下表列出了可用于测量角度的不同单位 -

单位描述
deg表示以度为单位测量的角度，范围为 0 到 360deg。一个完整的圆等于 360 度。
grad它表示以 0 到 400grad 之间的弧度测量的角度。一个完整的圆等于 400grad。
rad表示以弧度为单位的角度。一个完整的圆等于 2π 弧度，约为 6.2832rad。
turn表示以圈数测量的角度。一个完整的圆等于 1 圈。

CSS <angle>: deg

以下示例演示属性 Transform:rotate(60deg)将盒子旋转 60 度 -

<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

以下示例演示属性变换:rotate(-45grad) 将盒子旋转 -45 度 -

<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

以下示例演示了属性变换: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

以下示例演示了属性变换:rotate(1.75turn) 将盒子旋转 1.75 圈 -

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