transform 旋转导致按钮模糊的本质是浏览器对非整数角度旋转采用亚像素插值引发的抗锯齿副作用；可通过 translateZ(0)、will-change、整像素尺寸、90°倍数角度、SVG 替代等方案优化。
为什么 transform 旋转会让按钮变模糊
本质是浏览器在进行 CSS transform: rotate() 时，会把元素当作位图处理，尤其在非整数角度（比如 rotate(45deg)）或高 DPI 屏幕下，GPU 渲染可能触发亚像素插值，导致边缘发虚、锯齿明显。这不是 bug，而是抗锯齿策略在小尺寸 UI 元素上的副作用。
用 translateZ(0) 或 will-change 强制 GPU 加速渲染
让浏览器提前启用硬件加速层，避免 CPU 合成时的插值降质。但要注意不是所有情况都有效，且过度使用反而增加内存开销。
-
transform: rotate(45deg) translateZ(0);—— 最简兼容方案，IE11+、Chrome/Firefox/Safari 均支持 -
will-change: transform;—— 更明确提示渲染引擎，但仅建议加在 hover 或动画触发前的瞬间，不要常驻，否则持续占用图层资源 - 避免同时写
transform: rotate(...) scale(...)再叠加translateZ(0)—— 多重 transform 函数组合时，translateZ(0)必须放在最后，否则可能被覆盖
调整 rotate 角度为整数倍 90° 或配合整像素尺寸
当旋转角度是 90deg、180deg 这类对齐坐标轴的值时，浏览器通常能做整像素映射，几乎不模糊；但如果按钮宽高本身是奇数像素（如 23px），旋转后中心点仍可能落在亚像素位置。
- 优先设按钮
width和height为偶数（如24px、32px），再配合rotate(45deg) - 用
transform-origin: center;确保旋转锚点居中，避免因偏移加剧模糊 - 若必须用非 90° 倍数角度（如
37deg），可尝试加-webkit-backface-visibility: hidden;（Safari 特别敏感）
后备方案：用 SVG 替代纯 CSS 旋转
SVG 是矢量渲染，任意角度旋转都不会模糊，适合图标类按钮。缺点是无法直接用伪元素或纯 CSS 控制状态（需内联或 JS 切换 class）。
立即学习“前端免费学习笔记（深入）”；
- 把按钮内图标换成
<svg><use href="#icon-refresh"></svg>，然后只对 SVG 容器做transform: rotate(45deg) - 确保 SVG 根元素有明确
viewBox（如viewBox="0 0 24 24"），且无冗余 transform 属性干扰 - 避免用
img标签引用 SVG —— 此时它退化为位图，旋转照样模糊
真正影响清晰度的，往往不是 rotate 本身，而是它和尺寸、设备像素比、渲染层策略的连锁反应。试的时候先关掉所有动画、只测静态 rotate，再逐步加效果，不然容易误判根源。
