正确使用transform组合rotate()和scale()并配合transition可实现流畅的旋转缩放动画。1. transform: rotate(45deg) scale(1.2)支持多函数空格分隔，顺序影响视觉效果；2. 添加transition: transform 0.3s ease可使变化平滑，推荐仅监听transform以提升性能；3. 鼠标悬停动画示例中，.icon:hover触发rotate(180deg)和scale(1.5)，结合cubic-bezier增强动效；4. 注意设置元素布局、调整transform-origin改变旋转中心，初始状态可设scale(0.8)，移动端需优化性能。掌握这些细节即可高效实现组合动画。
在CSS中实现元素的旋转与缩放组合动画，配合transition可以让变化过程更自然流畅。关键在于正确使用transform属性组合rotate()和scale()，并通过transition控制过渡效果。
1. transform组合rotate与scale
通过transform可以同时设置旋转和缩放。多个变换函数可用空格分隔写在同一行。
示例：
.box {
transform: rotate(45deg) scale(1.2);
}
这会让元素先顺时针旋转45度，再放大1.2倍。
立即学习“前端免费学习笔记（深入）”；
2. 添加transition实现平滑过渡
要让旋转和缩放产生动画效果，需添加transition属性。可指定具体属性或使用all。
常用设置：
-
transition: transform 0.3s ease;—— 只对transform生效 -
transition: all 0.3s linear;—— 对所有可动画属性生效
推荐只监听transform，避免不必要的动画。
3. 鼠标悬停触发动画示例
常见用法是鼠标移入时旋转并放大元素。
.icon {
display: inline-block;
width: 50px;
height: 50px;
background: #007bff;
transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.icon:hover {
transform: rotate(180deg) scale(1.5);
}
这里使用cubic-bezier让动画更有弹性感。
4. 注意事项与技巧
实际应用中需注意以下几点：
- 确保元素有布局（如设置宽高或
display: inline-block），否则transform可能无效 - 可结合
transform-origin改变旋转中心点，例如：transform-origin: center bottom; - 若需初始状态为缩小，可从
scale(0.8)过渡到scale(1) - 移动端注意性能，避免在大量元素上频繁触发复杂动画
基本上就这些。掌握transform的组合写法和transition的精准控制，就能轻松实现旋转缩放动画。不复杂但容易忽略细节。
