答案：通过transform合并rotate和scale并配合transition或@keyframes，可实现旋转与缩放的流畅组合动画，需注意性能优化与过渡控制细节。
在CSS中实现旋转和缩放的组合过渡，关键在于正确使用 transform 属性与 transition 配合。虽然 transform 本身是一个单一属性，但可以同时包含多个变换函数（如 rotate、scale），并通过 transition 实现平滑动画。
1. 使用 transform 组合 rotate 和 scale
将 rotate() 和 scale() 写在同一个 transform 值中，用空格分隔：
.element {
transform: rotate(0deg) scale(1);
transition: transform 0.3s ease;
}
.element:hover {
transform: rotate(45deg) scale(1.2);
}
这样在鼠标悬停时，元素会同时旋转并放大，过渡自然流畅。
2. 控制过渡的时机与节奏
如果希望旋转和缩放有不同的缓动效果或延迟，可拆分为多个属性过渡（但 transform 仍需合并）：
立即学习“前端免费学习笔记（深入）”；
.element {
transform: rotate(0deg) scale(1);
transition:
transform 0.4s ease,
opacity 0.3s linear;
}
注意：不能单独对 rotate 或 scale 设置不同 duration，因为它们都属于 transform。若需更精细控制，考虑使用 CSS @keyframes 动画。
3. 使用 @keyframes 实现复杂组合动画
对于更复杂的时序控制，推荐使用关键帧动画：
@keyframes spinAndGrow {
0% {
transform: rotate(0deg) scale(1);
}
70% {
transform: rotate(60deg) scale(1.4);
}
100% {
transform: rotate(45deg) scale(1.2);
}
}
.element:hover {
animation: spinAndGrow 0.5s ease forwards;
}
这种方式能精确控制每一时刻的 transform 状态，适合需要非线性变化的场景。
4. 注意事项与性能优化
- 始终将 transform 用于位移、旋转、缩放，因为它由 GPU 加速，性能更好
- 避免在 transition 中使用 all，应明确指定 transform，防止意外触发重绘
- 设置 transform-origin 可调整旋转中心点，例如：
transform-origin: center center; - 移动端注意开启硬件加速：
transform: translateZ(0) rotate() scale();
基本上就这些。只要把多个 transform 函数写在一起，并通过 transition 或 animation 控制变化过程，就能实现流畅的组合动画效果。不复杂但容易忽略细节。
