风车旋转偏移、卡顿、hover后停不下来等问题，根源在于未正确设置transform-origin和will-change；需为元素设transform-origin（如center或100% 50%），并添加will-change: transform或translateZ(0)启用GPU加速。
直接用 transform + @keyframes 就能实现，不需要 JavaScript；但容易卡顿、旋转中心偏移、hover 触发后停不下来——这些问题都出在几个关键 CSS 属性上。
为什么风车转着转着就歪了？
根本原因是没设对 transform-origin。默认以元素左上角为旋转中心，叶片会绕着边角甩出去。
- 如果用
<img>标签，加style="transform-origin: center;"或写进 CSS：img { transform-origin: center; } - 如果用多个
<div class="blade">拼叶片，每个都要设transform-origin: 100% 50%;（让旋转点落在叶片右端中点） - 容器（如
.windmill）本身也要设transform-origin: center;，否则整体会偏移
animation 写了但不动？检查这三点
常见静止原因不是语法错，而是浏览器没触发重绘或动画被覆盖。
- 确保元素有明确宽高：
width和height不能是auto或依赖内容撑开（比如空<div>） - 别漏掉
animation-fill-mode: forwards;—— 否则动画一结束就跳回初始状态，看起来像“没动” - 避免和其他动画/transition 冲突：比如同时写了
transition: transform 0.3s，会劫持transform的控制权
hover 旋转 vs 自动旋转，参数怎么选？
自动转用 animation，悬停转用 :hover + animation，但行为逻辑完全不同。
立即学习“前端免费学习笔记（深入）”；
- 自动转推荐：
animation: rotate 4s linear infinite;（匀速、不停） - hover 转必须加
animation-play-state: paused;到默认状态，再在:hover里设running，否则鼠标移入前就已转几圈 - 想让 hover 后“慢慢启动”，别改
animation-duration，改animation-timing-function: ease-in;
移动端转不动或卡顿？
iOS Safari 和旧版 Android WebView 对 transform 的硬件加速支持不稳定，尤其嵌套多层时。
- 强制开启 GPU 加速：给动画元素加
will-change: transform;或transform: translateZ(0); - 避免在
@keyframes里同时改transform和opacity，这会让浏览器放弃合成层 - 如果用
img，确保图片尺寸不大于 500px × 500px，大图缩放+旋转极易掉帧
最常被忽略的是 transform-origin 和 will-change 的组合——前者决定转不转得正，后者决定转不转得顺；缺一不可。
