在网页交互里，让一个元素平稳地转动起来是常见需求。CSS 的 transition 与 transform 的 rotate 函数组合，是最轻量的实现方式之一。它不依赖 JavaScript 逐帧计算，也不触发页面的重排，而是交给浏览器的合成器处理，因此在多数设备上都能保持六十帧左右的流畅度。
一、transition 与 transform rotate 的协作原理
transition 的作用是为某个 CSS 属性的变化设定过渡效果。它包含四个要素：过渡属性名、持续时间、缓动函数、延迟时间。当元素的 transform 属性从一种状态变为另一种状态时，如果 transform 被列在 transition-property 中，浏览器就会在起止值之间插入中间帧。
transform 的 rotate 函数本质上是生成一个二维旋转矩阵。例如 rotate(0deg) 到 rotate(90deg)，浏览器会把旋转角度线性或按缓动曲线非线性地递增，并在每一帧重新计算矩阵后交给 GPU 合成。因为 transform 只影响合成层，不涉及布局与绘制，所以性能远好于用 top、left 做动画。
1.1 基础代码示例
下面这段代码展示了一个方块在鼠标悬停时旋转三百六十度。注意 transition 写在默认状态上，这样进入和离开悬停都会有效果。
.box {
width: 100px;
height: 100px;
background: #3498db;
/* 定义 transform 属性变化时的过渡 */
transition: transform 0.6s ease-in-out;
}
.box:hover {
/* 悬停时旋转一圈 */
transform: rotate(360deg);
}
上述写法中，ease-in-out 让旋转起步和收尾更柔和。如果去掉 transition，hover 瞬间就会跳到终点角度，完全没有动画感。这就是 transition 在组合里不可替代的原因。
1.2 为什么只用 transform 不写 transition 没动画
有些初学者把 rotate 写在类切换的 CSS 里，却忘了加 transition，结果元素直接变向。原因在于 CSS 属性赋值本身是瞬时的，transition 才是告诉渲染引擎“别一下子变，分段时间变”的指令。没有它，浏览器只取最终计算值。
另外，transition 只能作用于可插值属性。transform 作为整体函数列表，只要起止的函数结构一致（比如都是 rotate），就能插值；若从 rotate 变成 translate，则无法平滑过渡，浏览器会退回离散切换。
二、控制旋转动画的关键参数
想让旋转符合设计预期，需要理解 transition 的时间与缓动配置，以及 transform 的旋转中心。
2.1 持续时间与缓动函数
持续时间决定转速，过长显得拖沓，过短像闪烁。缓动函数控制角速度曲线，linear 是匀速，适合 loading 圈；ease-out 适合强调结束静止。可通过开发者工具的性能面板观察帧率，避免低于三十帧。
.spinner {
width: 40px;
height: 40px;
border: 4px solid #ccc;
border-top-color: #333;
border-radius: 50%;
/* 匀速无限旋转由 animation 控制，这里演示单次过渡 */
transition: transform 1s linear;
}
.spinner.active {
transform: rotate(180deg);
}
上例用 linear 保证半圈过程速度恒定。如果是卡片翻转，常用 ease 让中间稍快，两端稍慢，更符合物理直觉。
2.2 旋转中心 transform-origin
默认旋转中心是元素几何中心，但很多场景需要绕边角或特定点转。transform-origin 接收百分比或具体长度，改变矩阵平移部分，不影响 transition 机制。
.needle {
width: 4px;
height: 60px;
background: red;
transform-origin: bottom center;
transition: transform 0.3s ease;
}
.needle.turn {
transform: rotate(45deg);
}
这里指针绕底部中点转动，像仪表盘指针。若漏设 origin，它会绕自身中心转，视觉上完全不对。该属性同样可被 transition 过渡，但通常固定即可。
三、常见误区与优化建议
即便写对了属性，实际项目里仍有几个坑会导致动画失效或卡顿。
3.1 误把 transition 写在变化后的状态
有人把 transition 放在 :hover 或添加的类里，结果只有反向恢复时有过渡，正向没有。正确做法是放在元素基础声明中，让两种状态共享同一条过渡规则。
<style>
.card { transition: transform 0.4s; }
.card.flip { transform: rotateY(180deg); }
</style>
<div class="card">正面</div>
上面结构里，transition 在 .card 上，无论加或去掉 flip 类都有动画。若移到 .card.flip 内，首次加类便无过渡。
3.2 与 animation 的混淆
transition 适合状态切换的一次性过渡；若要无限旋转，应用 @keyframes 与 animation。二者可共存，但别用 transition 硬撑循环，那需要 JS 反复改值，反而浪费性能。
| 对比项 | transition + rotate | animation + rotate |
|---|---|---|
| 触发方式 | 属性变化自动触发 | 绑定即按关键帧运行 |
| 循环 | 不支持 | 支持 infinite |
| 适用 | 悬停、选中态切换 | loading、背景装饰 |
表里能看出，做菜单图标hover变叉号用 transition 最简洁；做转圈 loader 则选 animation。理清边界可减少无效代码。
3.3 开启 GPU 合成层
虽然 transform 默认进合成层，但在复杂页面仍可加 will-change: transform 提前提示浏览器，减少首次旋转时的图层创建延迟。注意不要滥用于过多元素，否则显存占用飙升。
.widget {
will-change: transform;
transition: transform 0.5s;
}
该声明让引擎预先分配资源，在低端机尤其明显。配合前面提到的 origin 与缓动，基本能覆盖日常旋转交互的全部要点。
css_transitiontransform_rotatecss_animation修改时间：2026-08-07 14:00:34