根本原因是rotate()计算出小数像素坐标（如102.73px），GPU合成层强制整数对齐导致亚像素抗锯齿失效，文字退化为灰度渲染而发虚；最易模糊场景包括非90°整数倍角度、小字号、奇数尺寸容器配50%原点；可靠解法是Math.round()取整角度、设偶数宽高、避免rotate与scale混用、用calc()补偿。
rotate() 为什么让文字变虚
根本原因不是旋转本身，而是浏览器在计算旋转后坐标时生成了小数像素值（比如 left: 102.73px），而 GPU 合成层强制对齐到整数像素网格，导致亚像素抗锯齿失效。文字退化为灰度渲染，边缘发虚、出灰边、显锯齿。Chrome 和 Edge 最明显，Firefox 因仍走部分软件渲染路径，表现稍好。
哪些 rotate 场景最易模糊
非 90° 整数倍的角度几乎必糊：rotate(5deg)、rotate(12.3deg)、rotate(45deg) 都会放大浮点坐标误差；小字号（≤14px）+ 旋转组合时更严重；容器宽高为奇数（如 width: 201px）再配 transform-origin: 50% 50%，中心点落在 100.5px，纹理采样直接失准。
真正有效的修复方式
别依赖 filter: blur(0) 或 rotateZ(0) —— 前者只是偶然绕过缓存，后者完全无效。可靠解法必须从源头控制像素对齐：
- 角度用
Math.round(angle)处理，比如el.style.transform = `rotate(${Math.round(angle)}deg)` - 容器设偶数尺寸：
width: 400px; height: 60px;，再配transform-origin: 50% 50% - 动画中避免
rotate()和scale()混用，防止小数叠加（如scale(1.2)把 16px 变成 19.2px） - 若必须微调位置，用
calc()补偿：例如父容器高为奇数，写transform: translateY(calc(-50% + 0.5px))
容易被当成“解法”实则加重问题的操作
translate3d(0, 0, 0) 不是修复手段，而是升层开关——它堵死了 CPU 渲染路径，把文字彻底交给 GPU 插值；backface-visibility: hidden 单独使用也会触发额外合成层，对非翻转场景毫无必要；perspective: 100px 这类小值会加剧畸变，建议 ≥300px 且只加在真正需要 3D 空间关系的父容器上。
立即学习“前端免费学习笔记（深入）”；
复杂点在于：模糊不是静态样式问题，而是动态渲染路径选择的结果。哪怕你写了font-smoothing: subpixel-antialiased，一旦元素进了合成层，这个设置就基本失效。 
