要让元素旋转动画生效，必须配合transition或@keyframes+animation；单位必须正确（如rotate(90deg)），且需注意transform-origin、fill-mode、js安全更新及滚动驱动等细节。
直接用 transform: rotate() 就能转，但只写这句不会动——它只是静态变换，要动起来得配 transition 或 @keyframes + animation；单位缺了（比如写 rotate(90) 而不是 rotate(90deg)）就彻底失效。
为什么写了 rotate() 元素却不转动
浏览器把 transform: rotate(360deg) 当作“立刻摆到那个角度”，没有时间维度。常见错误包括：
- 漏掉
transition或animation声明 -
@keyframes定义了但没在元素上加animation属性 - 单位写错或缺失：
rotate(90)❌、rotate(90deg)✅、rotate(0.5turn)✅ - 动画默认
animation-fill-mode: none，结束后弹回初始状态，想停在终点得加animation-fill-mode: forwards
用 hover 触发平滑旋转的正确写法
适合按钮、图标等交互反馈，核心是 transition 必须写在被旋转的元素上，且只监听 transform：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
-
transition: transform 0.3s ease;写在基础样式里，不是 hover 里 - hover 里只改
transform: rotate(180deg)，别重复写 transition - 如果元素是
inline（如<span></span>），先设display: inline-block或block，否则transform-origin可能不生效 - 想绕左上角转？加
transform-origin: 0 0;，别依赖默认居中
JS 动态控制旋转角度时怎么避免覆盖其他 transform
直接赋值 element.style.transform = "rotate(45deg)" 会清掉已有的 scale、translate 等值。安全做法分两种场景：
- 简单累加（如点击+45°）：用
dataset存当前角度，每次更新后生成完整字符串：el.style.transform = `rotate(${angle}deg)` - 复合变换（同时有缩放+位移）：优先用 CSS 类切换，JS 只增删类名，把
transform全交给 CSS 管理 - 真要 JS 拼接多个变换，别用字符串拼接（
"rotate(45deg) scale(1.2)"），而应统一用getComputedStyle(el).transform解析矩阵再叠加——但复杂度高，一般没必要 - 归零时别只设
rotate(0deg)，直接删掉style.transform或设为空字符串""
滚动时让元素跟着转，为什么不能用 @keyframes
@keyframes 是时间驱动，滚动是位置驱动——滚动快慢、暂停、反向都会让预设动画脱节。必须用 JS 实时映射：
- 监听
scroll事件，但只触发requestAnimationFrame，避免卡顿 - 用
getBoundingClientRect().top算元素进入视口的比例，再线性映射到 0–360° - 加
Math.min/Math.max限幅，防止滚动超出范围导致角度乱跳 -
transform-origin必须显式设置（如50% 50%），否则滚动中元素位置变化会让旋转中心“漂移”
真正麻烦的不是怎么转，而是转的时候有没有悄悄吃掉别的 transform，或者原点飘了还找不到原因——这些细节在调试时比语法更耗时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
