rotate()必须带单位（如deg），transition需写在基态而非仅hover，旋转容器要脱离文档流，3d旋转须加backface-visibility: hidden和perspective等。
直接用 transform: rotate() 配 transition 就能做出平滑旋转过渡，但 90% 的失效案例都卡在单位漏写、样式覆盖或容器没脱离文档流这三处。
rotate() 必须带单位，否则完全不转
写 rotate(90) 和 rotate(90deg) 是两回事：前者在所有现代浏览器里被静默忽略，不报错也不执行。这是复制粘贴代码后“明明写了却不动”的头号原因。
- 必须显式写
deg（推荐）、rad或turn，别指望浏览器补全 - JS 动态设置时用模板字符串：
el.style.transform = `rotate(${angle}deg)`，漏了deg就白写 - Safari 15.6 之前对无单位值解析不一致，统一写死单位最稳
transition 要写在基态，别只挂在 hover 上
如果只在 :hover 里写 transform: rotate(180deg)，首次悬停会“啪”一下跳过去，没有过渡动画——因为初始状态没声明 transition，浏览器不知道该平滑变。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 把
transition: transform 0.3s ease写在元素默认样式里（比如.icon类），不是只写在:hover中 - 避免用内联 style 设置
transform，它会覆盖 CSS 中定义的transition，导致动画失效 - 想点击切换？用 class 控制：
.rotated { transform: rotate(180deg); }，JS 只负责el.classList.toggle('rotated')
旋转容器得 position: absolute，否则布局全乱
给 <main></main> 或 <section></section> 直接加 transform: rotate(15deg)，它视觉上偏了，但仍在文档流里占原始位置——下面内容被顶开、滚动异常、鼠标点不准。
- 必须加
position: absolute或position: fixed把它抽离文档流 - 若需居中，用
top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(15deg)，注意translate和rotate顺序影响结果 - 千万别对
body或html设transform，某些安卓 WebView 会触发输入框失焦或滚动卡死
移动端翻转要加 backface-visibility: hidden
做卡片翻转或页面“甩入”类效果时，如果没加 backface-visibility: hidden，iOS Safari 和部分安卓微信 WebView 会在旋转到背面瞬间丢帧，出现“一闪空白”或内容错位。
- 所有参与 3D 旋转的元素（包括正反面容器）都要加
backface-visibility: hidden - 外层容器还得配
perspective和transform-style: preserve-3d，否则rotateY无效 - SVG 图标卡顿？额外加
will-change: transform，再补一句transform: translateZ(0)触发 GPU 加速
真正难的不是怎么写 rotate，而是判断该用 transition 还是 @keyframes、要不要进 3D 空间、以及哪些地方必须加硬件加速提示——这些细节不处理，动画就卡在用户眼里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
