CSS过渡如何实现图片旋转动画_transform rotate与transition配合
使用CSS transform: rotate()与transition可实现图片平滑旋转。1. HTML中添加图片并设类名；2. CSS设置transition控制旋转时长与缓动，hover时应用rotate()改变角度；3. 可通过transform-origin自定义旋转中心；4. 需持续旋转时可用@keyframes配合animation实现自动无限转动，适用于加载动画等场景。
想让图片平滑旋转，可以用 CSS 的 transform: rotate() 结合 transition 实现动画效果。关键在于设置过渡属性，使旋转不再瞬间完成，而是有时间渐变的过程。
1. 基础结构：准备图片元素
先在 HTML 中插入一张图片，并为其添加一个类名，方便后续用 CSS 控制。@@##@@
2. 设置 transform rotate 与 transition
CSS 中通过 transform: rotate() 定义旋转角度，用 transition 控制变化的持续时间和缓动效果。例如，鼠标悬停时让图片顺时针旋转90度：
.rotate-img {
transition: transform 0.6s ease;
}
.rotate-img:hover {
transform: rotate(90deg);
}
说明：
- transition: transform 0.6s ease 表示所有 transform 变化都用 0.6 秒完成，使用 ease 缓动函数
- rotate(90deg) 是旋转90度，可改为 180deg、360deg 等
- 旋转以元素中心为原点，默认是 transform-origin: 50% 50%，也可自定义
3. 自定义旋转中心点（可选）
如果希望图片绕左上角旋转，可以修改 transform-origin：
.rotate-img {
transition: transform 0.6s ea
se;
transform-origin: top left;
}
.rotate-img:hover {
transform: rotate(45deg);
}
se;
transform-origin: top left;
}
.rotate-img:hover {
transform: rotate(45deg);
}
4. 实现持续旋转动画（进阶）
若想让图片自动无限旋转，可用 @keyframes 配合 animation，但若坚持用 transition，可通过 JS 切换 class 触发。 纯 CSS 自动转方案：
.rotate-img {
animation: spin 2s linear infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
这适合加载图标等场景。
基本上就这些。用 transition + transform: rotate() 实现交互式旋转简单高效，适合 hover 效果。掌握 transition 的时间和缓动设置，能让动画更自然。
