通过CSS的animation与transform属性组合实现图片缩放旋转动画，先定义@keyframes设置scale和rotate关键帧，再绑定到元素的:hover状态，配合transform-origin、ease-in-out缓动及forwards保持最终状态，提升交互体验。
在网页设计中，图片的动态效果能显著提升用户体验。通过CSS的animation属性结合transform中的scale和rotate，可以轻松实现图片缩放与旋转的组合动画。这种效果常用于悬停交互、图库展示或按钮响应等场景。
定义基础样式与动画关键帧
要实现缩放与旋转的组合动画，先设置图片的基本样式，并使用@keyframes定义动画过程。
在关键帧中，可以通过transform: scale()控制大小变化，transform: rotate()控制旋转角度。两者可同时设置，实现复合变换。
- scale(1) 表示原始尺寸，scale(1.2) 放大20%
- rotate(0deg) 无旋转，rotate(360deg) 完整转一圈
- 多个变换写在同一
transform中，用空格分隔
@keyframes zoomSpin {
0% {
transform: scale(1) rotate(0deg);
}
100% {
transform: scale(1.3) rotate(360deg);
}
}
应用动画到图片并设置触发条件
将定义好的动画绑定到图片元素，并可通过:hover伪类实现鼠标悬停时触发动画。
设置动画的持续时间、缓动函数和播放方式，使效果更自然流畅。
.animated-image {
display: block;
width: 200px;
height: 200px;
object-fit: cover;
border-radius: 12px;
}
.animated-image:hover {
animation: zoomSpin 0.6s ease-in-out forwards;
}
优化动画性能与视觉体验
频繁的重绘会影响页面性能，使用transform能触发GPU硬件加速，提升渲染效率。
为避免动画突兀，可设置初始状态过渡，或使用will-change提前告知浏览器优化目标。
- 添加
transform-origin: center确保围绕中心缩放旋转 - 使用
ease-in-out让动画起止更柔和 - 设为
forwards使动画结束后保持最终状态 - 考虑移动端点击反馈，可用
pointer-events控制触发逻辑
.animated-image {
transform-origin: center;
transition: transform 0.3s;
}
.animated-image:hover {
animation: zoomSpin 0.6s ease-in-out forwards;
will-change: transform;
}
基本上就这些。合理组合scale和rotate，再配合合适的动画参数，就能做出既美观又高效的交互效果。不复杂但容易忽略细节。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
