rotate()让文字发虚的根本原因是触发合成层后gpu双线性插值导致亚像素模糊，而非旋转本身；will-change仅预提升图层但不解决对齐问题，真正有效的是整数角度变换、适时设置/清除will-change、translatez(0)或绕开gpu管线。
为什么rotate()会让文字发虚，不是因为“旋转”本身
根本原因不是rotate()这个函数，而是它触发了合成层（Compositing Layer）后，浏览器把文字渲染为纹理贴图，再交给GPU做几何变换。GPU对纹理采样时用的是双线性插值，而文字边缘一旦落在非整数像素坐标上，就会被模糊化——尤其在rotate(5deg)这种非90度倍数的场景下，坐标计算天然带小数。
will-change: transform 并不能直接让文字变清晰
will-change: transform只是提前告诉浏览器“这个元素可能要动”，从而触发图层提升；但它不重置渲染上下文、不强制像素对齐、也不干预字体抗锯齿策略。实际测试中，单独加这行常无改善，甚至因过早升层导致内存占用上升或滚动卡顿。
真正起效的组合是：
- 仅在动画开始前一刻设置：
el.style.willChange = 'transform' - 动画结束后立刻清除：
el.style.willChange = 'auto' - 必须配合整数级变换值（如
rotate(90deg)比rotate(87.3deg)稳得多） - 若需动态角度，用
Math.round(angle)截断小数，再拼进transform
比will-change更轻量且可控的替代方案
多数情况下，translateZ(0)比will-change更直接有效：它强制创建新合成层并重走光栅化流程，常能恢复亚像素渲染。但要注意代价——长列表里每个item都加，会显著增加图层数量。
更推荐的做法是分层控制：
- 静态旋转（比如图标翻转）：直接用
transform: rotateY(180deg) backface-visibility: hidden，不加will-change或translateZ - 动画中旋转：动画开始前设
will-change: transform，结束帧用requestAnimationFrame清掉 - 高密度列表项：宁可牺牲一帧精度，用
transform: translate(0, 0)代替will-change，避免图层爆炸
真正治本：绕开GPU纹理采样的前提
只要文字还被当作纹理处理，就逃不开插值模糊。所以最稳的解法是不让它进GPU管线：
- 用
transform-origin: 50% 50%+ 整数宽高容器，确保旋转中心落在像素中心（比如宽高都设为偶数px） - 避免
rotate()和scale()混用，缩放会放大坐标误差 - 移动端Safari特别敏感，得叠加
-webkit-font-smoothing: subpixel-antialiased，但仅当transform值确定为整数时才生效 - 终极手段：不用
rotate()，改用CSS渐变+伪元素模拟倾斜效果，完全避开变换管线
容易被忽略的一点：模糊是否出现，高度依赖设备像素比（dpr）。dpr=1的普通屏上，rotate(0.1deg)就可能糊；而dpr=2的Retina屏下，同一段代码可能完全正常——别只在开发机上验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
