CSS角度单位解析：度、弧度、梯度等角度表示
1. 什么是CSS角度单位
CSS角度单位用于定义角度的度量值，主要应用于元素的变换操作，例如旋转、倾斜以及创建颜色渐变的背景和方向。在CSS中，角度被表示为一个数字后跟一个单位，例如 360deg。
掌握不同的角度单位有助于前端开发者在实现动画效果、设计布局时获得更精确的控制和更高的灵活性。
2. CSS角度单位详解
CSS主要支持四种角度单位：deg、rad、grad 和 turn。
2.1 度 (deg)
deg 是CSS中最常用的角度单位，表示度数。一个完整的圆是 360deg。
示例代码： 将一个 div 元素顺时针旋转90度。
<!DOCTYPE html>
<html>
<head>
<style>
.zzw_rotated_box {
width: 100px;
height: 100px;
background-color: #4CAF50;
transform: rotate(90deg);
}
</style>
</head>
<body>
<div class="zzw_rotated_box"></div>
</body>
</html>2.2 弧度 (rad)
rad 表示弧度。一个完整的圆周对应 2π 弧度，约等于 6.2832rad。当旋转角度与数学计算（如π）关联紧密时，使用弧度会更方便。
示例代码： 将一个 div 元素旋转 π/2 弧度（即90度）。
<!DOCTYPE html>
<html>
<head>
<style>
.zzw_rad_box {
width: 100px;
height: 100px;
background-color: #2196F3;
/* 旋转 π/2 弧度 */
transform: rotate(1.5708rad);
}
</style>
</head>
<body>
<div class="zzw_rad_box"></div>
</body>
</html>2.3 梯度 (grad)
grad 表示梯度，也被称为”百分度”。一个完整的圆是 400grad。因此，100grad 相当于90度。这种单位在某些设计或数学计算中可能会用到。
示例代码： 使用梯度单位旋转一个 div 元素。
<!DOCTYPE html>
<html>
<head>
<style>
.zzw_grad_box {
width: 100px;
height: 100px;
background-color: #ff9800;
/* 旋转 100grad，相当于90度 */
transform: rotate(100grad);
}
</style>
</head>
<body>
<div class="zzw_grad_box"></div>
</body>
</html>2.4 圈数 (turn)
turn 是最直观的单位，它表示旋转的圈数。1turn 代表完整的一圈，相当于 360deg。使用 turn 单位可以非常方便地表达多圈旋转。
示例代码： 将一个 div 元素旋转四分之三圈。
<!DOCTYPE html>
<html>
<head>
<style>
.zzw_turn_box {
width: 100px;
height: 100px;
background-color: #e91e63;
/* 旋转 0.75 圈，即270度 */
transform: rotate(0.75turn);
}
</style>
</head>
<body>
<div class="zzw_turn_box"></div>
</body>
</html>3. 单位对比与换算
3.1 换算关系
这四种角度单位之间可以相互转换，下表清晰地展示了它们在一个完整圆周下的对应关系：
| 单位 | 相当于一个完整圆周 |
|---|---|
deg | 360° |
rad | 2π rad (约 6.2832rad) |
grad | 400grad |
turn | 1turn |
基于此，可以得出它们之间的换算关系：
- 1turn = 360deg = 400grad = 2π rad
- 90deg = 100grad = 0.25turn = π/2 rad
3.2 使用场景与选择
虽然所有角度单位在功能上是等价的，但选择哪种单位主要取决于具体场景和开发者习惯：
deg：最常用、最直观，适用于大多数日常开发场景，如简单的图标旋转、卡片翻转动画等。rad：当旋转与数学计算或物理模型（如圆周运动、波形）密切相关时，使用弧度更为方便。turn：当需要明确表示旋转圈数时（如大风车、加载动画），turn单位使代码意图非常清晰。grad：使用相对较少，主要在特定的设计或数学计算领域中可能会遇到。
4. 综合应用实例
下面的例子将在一个页面中综合展示不同角度单位的使用效果，并创建一个使用多种角度单位的连续旋转动画。
示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
.zzw_container {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 40px;
}
.zzw_box {
width: 100px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
}
.zzw_box_deg { background-color: #4CAF50; transform: rotate(45deg); }
.zzw_box_rad { background-color: #2196F3; transform: rotate(0.7854rad); } /* π/4 弧度，即45度 */
.zzw_box_grad { background-color: #ff9800; transform: rotate(50grad); } /* 相当于45度 */
.zzw_box_turn { background-color: #e91e63; transform: rotate(0.125turn); } /* 相当于45度 */
/* 持续旋转动画 */
.zzw_spinner {
width: 80px;
height: 80px;
border: 8px solid #f3f3f3;
border-top: 8px solid #3498db;
border-radius: 50%;
animation: zzw_spin 2s linear infinite;
margin: 20px auto;
}
@keyframes zzw_spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(1turn); } /* 使用turn单位完成一整圈旋转 */
}
</style>
</head>
<body>
<h2>不同角度单位效果对比 (均旋转45度)</h2>
<div class="zzw_container">
<div class="zzw_box zzw_box_deg">deg</div>
<div class="zzw_box zzw_box_rad">rad</div>
<div class="zzw_box zzw_box_grad">grad</div>
<div class="zzw_box zzw_box_turn">turn</div>
</div>
<h2>持续旋转动画 (使用 turn 单位)</h2>
<div class="zzw_spinner"></div>
</body>
</html>5. 常见问题与注意事项
- 负值表示：所有角度单位都支持负值，代表逆时针旋转。例如，
rotate(-90deg)表示逆时针旋转90度。 - 超出范围的值：角度值允许超出
0-360deg的范围。浏览器会自动将其转换为等效的0-360deg范围内的值。例如，450deg等效于90deg。 - 单位不可省略：与CSS中的其他数值单位一样，数字和单位之间不能有空格，并且单位不能省略。
rotate(90)是无效的，必须写成rotate(90deg)等形式。
本篇教程知识点总结
| 知识点 | 知识内容 |
|---|---|
| CSS角度单位作用 | 用于定义角度度量，主要应用于元素的变换（如旋转、倾斜）和渐变方向。 |
| 度 (deg) | 最常用的角度单位，一个完整的圆为360deg。 |
| 弧度 (rad) | 以π为基础的单位，一个完整的圆为2π弧度，约等于6.2832rad。 |
| 梯度 (grad) | 一个完整的圆为400grad，100grad相当于90度。 |
| 圈数 (turn) | 直观表示旋转圈数的单位，1turn等于完整的一圈（360deg）。 |
| 单位换算关系 | 1turn = 360deg = 400grad = 2π rad。这些单位可以根据此关系进行相互转换。 |
| 单位选择场景 | deg适用于大多数日常场景；rad适用于数学计算；turn适用于明确表示圈数的场景；grad使用较少。 |
| 使用注意事项 | 角度值可以为负，表示逆时针旋转；角度值可超出0-360度范围，浏览器会自动规整；数字和单位必须连写，不可省略单位。 |