1. **基本旋转**
使用 `rotate()` 函数可以使元素绕中心点旋转。角度单位可以是 `deg`（度）、`rad`（弧度）或 `turn`（圈）。
css
.element {
transform: rotate(45deg); /* 顺时针旋转45度 */
}
2. **旋转方向**
- **正数角度**：顺时针旋转。
- **负数角度**：逆时针旋转。
css
.element {
transform: rotate(-45deg); /* 逆时针旋转45度 */
}
3. **设置旋转中心点**
通过 `transform-origin` 属性可以改变元素的旋转中心点（默认是元素中心 `center`）。
css
.element {
transform: rotate(45deg);
transform-origin: top left; /* 以左上角为旋转点 */
}
常见的取值包括：
- `top left` / `left top`（左上角）
- `center`（中心点，默认值）
- `bottom right`（右下角）
- 具体坐标值（如 `50px 100px`）
4. **组合变换**
可以同时应用旋转、缩放、平移等变换，注意顺序会影响最终效果。
css
.element {
transform: rotate(45deg) scale(1.2) translate(10px, 20px);
}
5. **动态旋转（过渡与动画）**
- **过渡（Hover 效果）**：鼠标悬停时平滑旋转。
css
.element {
transition: transform 0.5s ease;
}
.element:hover {
transform: rotate(180deg);
}
- **动画（无限旋转）**：使用 `@keyframes` 定义动画。
css
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.element {
animation: spin 2s linear infinite; /* 2秒旋转一圈，无限循环 */
}
6. **3D 旋转**
使用 `rotateX()`、`rotateY()`、`rotateZ()` 可以实现 3D 空间中的旋转（需要配合 `perspective` 属性）。
css
.element {
transform: rotateX(45deg) rotateY(30deg);
}
示例汇总
css
/* 1. 基础旋转 */
.basic-rotate {
transform: rotate(45deg);
}
/* 2. 悬停效果 */
.hover-rotate {
transition: transform 0.3s;
}
.hover-rotate:hover {
transform: rotate(90deg);
}
/* 3. 自定义旋转中心 */
.custom-origin {
transform-origin: 0% 100%; /* 左下角为原点 */
transform: rotate(30deg);
}
/* 4. 无限旋转动画 */
.spinning {
animation: spin 3s linear infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
注意事项
1. **性能优化**：使用 `will-change: transform` 可以提前告知浏览器某个元素即将发生变化，提升动画性能。
2. **堆叠顺序**：旋转后的元素可能会影响层叠顺序（z-index），需要通过 `position` 和 `z-index` 调整。
3. **兼容性**：`transform` 属性在现代浏览器中支持良好，但旧版浏览器（如 IE9-）需要添加前缀（`-webkit-transform`）。
通过灵活组合这些属性，你可以实现丰富的旋转效果，如卡片翻转、加载动画、导航菜单切换等。