在css的样式设置中，当我们需要实现元素旋转、渐变角度设置等效果时，就需要用到角度单位来定义具体的角度数值。css规范中内置了多种角度单位，不同的单位对应不同的角度计量规则，适用的场景也存在差异。
css支持的角度单位类型
css目前支持四种标准角度单位，分别是deg、grad、rad、turn，每种单位的使用方式和换算关系如下。
1. deg单位
deg是度数单位，是最常用的角度单位，一个完整的圆对应360deg，是最符合日常认知的角度单位。正数值表示顺时针旋转，负数值表示逆时针旋转。
该单位常用于transform属性的旋转场景，示例如下：
/* 元素顺时针旋转45度 */
.rotate-deg {
transform: rotate(45deg);
}
/* 元素逆时针旋转90度 */
.rotate-deg-reverse {
transform: rotate(-90deg);
}
2. grad单位
grad是梯度单位，一个完整的圆对应400grad，该单位的使用场景相对较少，更多出现在一些专业的图形计算场景中。换算关系为360deg等于400grad，即1deg等于1.111grad。
使用示例：
/* 梯度单位旋转，对应90度 */
.rotate-grad {
transform: rotate(100grad);
}
3. rad单位
rad是弧度单位，属于数学领域的标准角度单位，一个完整的圆对应2π rad，约等于6.2832rad。在涉及三角函数计算的前端场景中，使用弧度单位会更方便。
使用示例：
/* 弧度单位旋转，对应180度 */
.rotate-rad {
transform: rotate(3.1416rad);
}
4. turn单位
turn是圈数单位，一个完整的圆对应1turn，该单位在设置多圈旋转动画时非常直观，不需要计算具体的度数。比如0.5turn就是半圈，2turn就是两圈。
使用示例：
/* 旋转半圈，对应180度 */
.rotate-turn {
transform: rotate(0.5turn);
}
/* 动画中旋转两圈 */
.rotate-animation {
animation: spin 2s linear infinite;
}
@keyframes spin {
from {
transform: rotate(0turn);
}
to {
transform: rotate(2turn);
}
}
不同角度单位的换算关系
四种角度单位之间的换算关系如下表所示：
| 单位类型 | 完整圆对应数值 | 与deg的换算 |
|---|---|---|
| deg | 360 | 1deg = 1deg |
| grad | 400 | 1deg = 1.111grad |
| rad | 2π（约6.2832） | 1deg = 0.01745rad |
| turn | 1 | 1deg = 0.002778turn |
使用注意事项
- 角度单位属于css的
<angle>数据类型，必须和数值一起使用，不能单独出现，比如不能写rotate(deg)，必须带具体数值。 - 单位名称必须小写，写
45DEG是无效的，必须写成45deg。 - 在设置渐变的角度时，同样可以使用这些角度单位，比如
background: linear-gradient(45deg, red, blue)。
注意：部分非常旧的浏览器可能不支持
turn单位，如果需要兼容旧浏览器，建议优先使用deg单位。