1. 语法与基础
1.1 rotate() 的定位与语义
在 CSS 的变换模型中，rotate() 被定义为 transform 函数族的一员，它负责将元素在二维平面内围绕 Z 轴进行旋转。这个行为其实就是把坐标系旋转，进而改变元素的显示方向。理解这一点的关键是：rotate() 实际上是 transform 的一部分，并且它与 translate、scale、skew 共同构成了常见的合成变换。旋转的中心点由 transform-origin 决定，默认是元素的中心。
要使用它，核心语法就是在 transform 属性中调用 rotate()，并在角度后缀以 deg、rad、turn 等单位之一。接下来我们看看典型的写法。角度单位要正确匹配你在页面上的单位偏好。
/* 基本旋转示例 */
.element {transform: rotate(30deg); /* 将元素顺时针旋转 30 度 */
}
1.2 语法要点与单位
角度值的单位有 deg、rad、以及 turn，选择哪一个取决于你对旋转角度的直观理解。deg 是最常见也最易读的单位，当你需要与常规角度打交道时尤为方便。只有一个关键信息需要牢记：角度单位必须和 transform 的其他函数共用一个坐标系，否则结果可能不易预测。
除了单独使用 rotate()，还可以把它与其他 transform 函数放在同一个 transform 声明里，形成一组线性变换。下面的示例展示了一个典型的组合方式：
/* 组合示例：先旋转再平移 */
.element {transform: rotate(45deg) translateX(20px);
}
2. 使用场景与组合
2.1 与其他 transform 的组合
Transform 的函数是按从左到右的顺序依次执行，所以 transform: rotate(45deg) translateX(20px) 与 transform: translateX(20px) rotate(45deg) 的效果并不相同。这个顺序直接影响最终的位置与方向。理解这一点对实现复杂动画尤为关键。合成变换的顺序决定了视觉结果，因此在实现旋转时应明确目标态势。
在实际应用中，常见的组合还包括 scale()、skew() 与 translate()。通过合理的顺序，可以实现从简单旋转到复杂路径的平滑过渡。以下是一个典型的同时应用旋转与平移的案例：
/* 旋转 + 平移的混合变换 */
.container {transform: rotate(-15deg) translate(30px, 10px);
}
2.2 旋转原点与对齐
旋转的中心点由 transform-origin 决定，默认是元素的中心。但在实际布局中，改变旋转原点可以实现不同的视觉效果，例如让按钮围绕左上角旋转，或者围绕底部中心旋转。transform-origin 的设置直接影响旋转轴心，从而改变旋转后的轨迹。
通过简单的单行样式即可实现多种对齐方式，例如将原点设为左上角，以便对齿轮状控件进行外圈旋转：
/* 将旋转原点设为左上角 */
.icon {transform-origin: 0 0; /* left top */transform: rotate(60deg);
}
3. 兼容性与最佳实践
3.1 浏览器兼容性
CSS transform 与 rotate() 在现代浏览器中普遍受支持，几乎所有主流浏览器都实现了对 transform 的原生支持。对于较旧的浏览器，尤其在 Tab 浏览器或移动端 Safari 版本之前，可能需要使用前缀来确保兼容性：-ms-transform、-webkit-transform 等。
在跨浏览器开发中，推荐的实践是提供前缀版本与无前缀版本的组合，并通过工具链进行自动前缀化处理。下面的示例展示了一个常见的前缀兼容写法：
/* 跨浏览器兼容性示例（包含前缀） */
.element {-webkit-transform: rotate(30deg);-ms-transform: rotate(30deg);transform: rotate(30deg);
}
3.2 性能与副作用
正确应用 will-change: transform 与 backface-visibility 等属性，可以提升 GPU 加速下的渲染性能，降低抖动与重绘成本。与此同时，过度使用复杂的变换组合可能带来额外的渲染开销，因此在动画场景中应保持适度。优化点在于定位关键元素并避免不必要的重绘。
在响应式设计中，旋转往往用于图标、按钮或装饰性元素的交互效果。通过 适当的变换链与原点设置，可以实现更平滑的过渡和更直观的用户体验。
4. 实践示例与常见坑
4.1 最小可用例
一个最小可用的旋转案例通常只需要一个 transform 声明即可实现视觉效果。通过两步就能看到效果：先设置旋转，再在需要时调整原点。最小化的代码更易维护且易于调试。
/* 最小旋转示例（无额外效果） */
.box {width: 100px;height: 100px;background: #4a90e2;transform: rotate(25deg);
}
4.2 在响应式布局中的应用
在移动端与桌面端共存的场景下，旋转常用于提示、转动箭头或给控件带来微交互效果。通过结合 媒体查询 与动态 class，能够实现不同设备上的自适应旋转角度。下面是一个在悬停或聚焦时启用旋转的示例：
/* 响应式旋转：桌面设备较大角度，移动端较小角度 */
.icon--responsive {transition: transform 300ms ease;
}
@media (max-width: 600px) {.icon--responsive {transform: rotate(15deg);}
}
@media (min-width: 601px) {.icon--responsive {transform: rotate(45deg);}
}
