最简旋转动画用 transform: rotate(360deg) 配 transition 或 @keyframes 即可实现，需注意单位（deg）、transform-origin 定义枢轴点、animation-fill-mode: forwards 保持终态，以及 JS 动态设置时避免覆盖其他 transform 值。
用
实现最简旋转动画
直接加 CSS 就能动，不需要 JS。核心就是
配合
或
。注意：
默认以元素中心为原点，如果想换 pivot 点，得配
。
常见错误是只写
忘了单位——必须带
（或
、
），否则无效。
适合鼠标悬停触发的单次旋转（比如按钮 hover 转一圈）
需要循环转？用
+
想让图标绕左上角转？加一句
中
的关键参数怎么设
写
最稳妥。别偷懒写
，因为部分旧版 Safari 对省略
解析不一致。
容易被忽略的是：动画默认在
下，结束后会“弹回”初始状态。如果希望停在最后一帧，得显式加
。
立即学习
“
前端免费学习笔记（深入）
”；
想控制转速？调
，比如
是快转，
显得沉稳
要反转？把
改成
，或直接加
卡顿？检查是否触发了 layout（比如同时改
），纯
是 GPU 加速的，放心用
JS 控制旋转角度时为什么总不准
用 JS 动态设
看似简单，但实际容易覆盖掉 CSS 里定义的其他
值（比如已有
，再设
就丢了缩放）。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
真正安全的做法是用
读出现有值，再拼接；或者更推荐——用 CSS 自定义属性传参：
然后 CSS 里写：
。这样 JS 只管变量，不碰 transform 字符串。
实时旋转（如罗盘）？避免频繁 setAttribute，优先用
批量更新
IE11 不支持 CSS 变量？那就老实用
，手动维护完整字符串
旋转动画在移动端点击失效或跳变
典型现象：iOS Safari 上 hover 旋转没反应，或者点击后突然跳到 0 度再开始转。根本原因是移动端没有 hover 概念，且部分浏览器对
在 display 切换（如
）后不触发重绘。
解决思路不是加
监听，而是统一用
+ 类名切换，靠
控制启停，或者用
和
替代
。
按钮点击旋转？绑定
后加 class，CSS 里用
动画中途想暂停？
，比反复增删 class 更轻量
安卓微信内嵌浏览器对
渲染偏移？试试改成
或具体像素值
旋转本身很简单，难的是在不同触发方式、不同设备、不同已有样式共存时保持行为稳定。最常出问题的不是
写法，而是它和其他 transform、display、事件机制的交互细节。
transform: rotate()transform: rotate(360deg)transition@keyframesrotate()transform-originrotate(360)degradturntransition: transform 0.3s ease-in-out@keyframesanimation: spin 2s linear infinitetransform-origin: 0 0animationrotate()@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }0 → 360degdeganimation-fill-mode: noneanimation-fill-mode: forwardsanimation-duration1s4sto-360deganimation-direction: reversewidthtransformelement.style.transform = 'rotate(' + deg + 'deg)'transformscale(1.2)rotategetComputedStyleelement.style.setProperty('--rotate-deg', deg);transform: rotate(var(--rotate-deg, 0deg)) scale(1.2);requestAnimationFrame--rotate-degelement.style.transform = `rotate(${deg}deg) scale(1.2)`transitiondisplay: none ↔ blocktouchstartanimationanimation-play-stateopacityvisibilitydisplayclick.btn.rotating { animation: spin 0.6s ease-out; }animation-play-state: pausedtransform-origin: 50% 50%center centerrotate()