用 transform: rotate() 做图片旋转动画最直接，核心依赖 CSS 的 transform 和 animation；需为图片设类名（如 class="spin"），配合 @keyframes 定义旋转、animation 属性控制时长/循环/速度，并注意 transform-origin、硬件加速及旧浏览器兼容性。
用 transform: rotate() 做图片旋转动画最直接
HTML5 本身不提供“旋转动画”这个功能，真正起作用的是 CSS 的 transform 和 animation。图片（<img alt="html5中如何让图片旋转动画效果图" >）是普通 HTML 元素，只要加对样式就能转起来。
常见错误是试图用 <canvas></canvas> 或 JS 手动改角度——没必要，CSS 动画更轻量、更易维护、硬件加速也更稳。
- 必须给图片加一个类名或 ID，比如
class="spin"，不能只靠标签选择器（img）全局控制，否则所有图都转 - 动画默认会从 0° 开始，如果想让图片初始就带角度，得额外设
transform: rotate(30deg)在非动画状态下 - 别忘了加
transform-origin，默认是中心点（50% 50%），但有时需要绕左上角转，就得写成transform-origin: 0 0
@keyframes 定义旋转时注意循环和方向
很多人写完 @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } 就以为完了，结果发现第一帧有闪动或停顿——这是因为浏览器在动画开始前会先渲染原始状态，再跳进动画。
解决方法不是加延迟，而是让元素“一开始就处于动画逻辑中”：
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 把初始
transform也写进动画里，比如from { transform: rotate(0deg); }，同时确保元素本身没其他冲突的transform - 用
animation-direction: normal（默认）是单向转；要来回转就用alternate；要无限重复必须写infinite - 别用
animation-timing-function: linear以外的值测试旋转——ease会让起步和结束明显变慢，看起来像卡顿
```css
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.spin {
animation: spin 2s linear infinite;
}
```IE/Edge 旧版本不支持 transform 动画？别硬扛
IE10+ 支持 transform，但 IE9 及以下完全不认；老 Edge（≤18）对 transform-origin 的百分比解析也有 bug。强行加 -ms- 前缀已无效，现代项目基本可放弃兼容。
如果你真遇到必须跑在 IE11 的场景：
- 用
animation: spin 2s infinite搭配transform: rotate(360deg)是 OK 的，但别混用scale或translate，IE11 对复合变换容易失真 - 避免在
rotate()里用小数角度（如rotate(0.5deg)），IE11 渲染抖动明显 - 如果图片是 SVG，优先用 SVG 自带的
<animatetransform></animatetransform>，它在 IE9+ 都能跑，且不依赖 CSS
图片旋转时模糊、锯齿？跟 will-change 和缩放有关
尤其在 Chrome 和 Safari 上，高速旋转的图片边缘发虚、出现彩色噪点，不是代码写错了，是 GPU 渲染时用了低质量插值。
本质是浏览器对旋转后像素做了双线性插值，而你想要的是最近邻（sharp）效果——但 CSS 没有直接开关，只能绕过：
- 加
image-rendering: -webkit-optimize-contrast;或image-rendering: crisp-edges;，对部分场景有效 - 更可靠的是触发硬件加速：给图片加
transform: translateZ(0)或will-change: transform，强制走 GPU，锯齿会显著减少 - 如果图片本身分辨率低（比如 50×50 像素），放大后再旋转必然糊——先用高倍图 +
width/height缩放，别靠transform: scale()
旋转动画看着简单，但实际卡点都在细节：初始状态是否参与动画、旧浏览器怎么降级、GPU 加速是否真正生效、以及图片源是否撑得起缩放。这些地方一漏，效果就断层。
