CSS 数据类型 <angle> 定义了以度数、梯度、弧度或转弯为单位的角度值。此属性用于渐变和某些转换函数。
可能的值
- <number> - 数字可以是正值或负值。
语法
<angle> = number;
需要注意以下几点：
- <angle>数据类型包括一个<数字>后跟以下单位之一（如表中所列）。
- 单位和数字之间不允许有空格。
- 可以选择在数字 0 之后包含角度单位。
- 角度前面可以有一个 + 或 - 号，正号顺时针表示，负号逆时针表示。
- 静态单位属性可以具有等效的角度（例如，90 度相当于 -270 度），但动态属性（例如动画或过渡）的效果可能会有所不同。
下表列出了可用于测量角度的不同单位 -
| 单位 | 描述 |
|---|---|
| deg | 表示 0 到 360 度之间的角度，以度为单位。一个完整的圆等于 360 度 |
| grad | 表示在 0 到 400grad 之间以梯度为单位测量的角度。一个完整的圆等于 400grad。 |
| rad | 表示以弧度为单位测量的角度。一个完整的圆等于 2π 弧度，约为 6.2832rad。 |
| turn | 表示以圈数为单位测量的角度。一个完整的圆等于 1 圈。 |
CSS <angle> - deg
以下示例演示了属性转换：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） 将盒子旋转 -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
以下示例演示了属性转换：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.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>
