用transform: rotate()实现旋转需注意：必须带单位（如deg）、设transform-origin、加infinite循环和forwards保持终态，inline元素需设display，模糊时加translatez(0)启gpu渲染。
直接用 transform: rotate() 配合 @keyframes 和 animation 就能实现，不需要 JS 或插件——但漏掉单位、没设 transform-origin、或动画结束后“弹回原位”，是 90% 编辑器用户卡住的点。
为什么写了 rotate(45) 却完全不转？
浏览器会静默忽略无单位的角度值，rotate(45) 是无效写法，必须带单位。
-
rotate(45deg)（最常用）、rotate(0.25turn)、rotate(0.785rad)都合法；rotate(45)或rotate("45deg")（引号在 CSS 里非法）都不行 - 部分编辑器（如 VS Code 的实时预览）不触发重绘，改完 CSS 后需手动刷新页面才能看到效果
- 若元素是 inline 元素（如
<span></span>），默认不支持transform，得先加display: inline-block或block
怎么让旋转绕左上角而不是中心点？
transform-origin 必须显式声明，否则所有编辑器都按默认 50% 50% 渲染，哪怕你写了 top left 也得确认是否被其他规则覆盖。
- 写成
transform-origin: 0 0最稳妥，兼容所有现代编辑器和浏览器 - 避免用
transform-origin: top left搭配百分比单位的父容器，某些编辑器（如 CodePen 嵌入模式）解析会有偏差 - 如果旋转后元素位置“偏移”，大概率是
transform-origin和元素盒模型（padding/border）叠加导致，建议用box-sizing: border-box统一基准
动画转一圈就停，怎么让它一直转？
animation 默认只执行一次，靠 infinite 控制循环，但编辑器里常因简写遗漏触发意外行为。
- 完整写法应为：
animation: spin 2s linear infinite；漏掉infinite就只转一次 - 若希望动画结束后保持在 360° 状态（比如加载图标停在转完那一帧），必须加
animation-fill-mode: forwards，否则多数编辑器预览会“闪回”到 0° - 别用
animation: spin 2s这种省略写法——linear和infinite不写就会用浏览器默认值，而不同编辑器默认值可能不同
编辑器里旋转文字模糊，怎么修复？
不是代码写错了，是浏览器渲染路径问题：软件渲染对 sub-pixel 坐标处理差，尤其在 Chrome/Firefox 的编辑器内嵌预览中明显。
- 给旋转元素加
transform: rotate(10deg) translateZ(0)（注意顺序，translateZ(0)要写在后面）可强制走 GPU 渲染 - 更彻底的写法：
transform: rotate(10deg) translate3d(0, 0, 0)，但别在多个元素上滥用，编辑器内存占用会明显升高 - 如果元素含小字号文字，额外加
backface-visibility: hidden能减少重绘抖动，尤其在移动端编辑器预览时有效
真正麻烦的不是写法，而是编辑器自身对 transform-origin 百分比计算、animation-fill-mode 的模拟精度，以及是否启用硬件加速——这些底层行为不会报错，但会让同一段 CSS 在不同编辑器里表现不一致。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
