模糊是GPU合成层对非整数像素坐标的妥协；rotate()使文字边缘落于亚像素位置，触发双线性插值导致抗锯齿失效，且translate3d(0,0,0)会加剧该问题。
模糊不是 bug，是浏览器在 GPU 合成层里对非整数像素坐标的妥协；根本问题出在 rotate() 计算后文字边缘落在了亚像素位置，而合成层强制整像素采样，导致子像素抗锯齿失效。
为什么 rotate() 会让文字变虚
浏览器把应用了 transform 的元素提升到独立合成层（GPU 纹理），此时文字不再走原生光栅化路径，而是被当位图处理。一旦旋转角度不是 90° 整数倍（比如 rotate(7deg) 或 rotate(12.3deg)），变换矩阵就会生成带小数的坐标（如 left: 102.73px），GPU 双线性插值一插，边缘就“抹开”了。
- Chrome/Edge 中尤其明显：Layers 面板能看到文字元素被单独升层，且 “Paint” 步骤消失
- Firefox 和 Safari 渲染策略不同，模糊程度略轻，但不等于没风险
- 哪怕
rotate(0.1deg)在移动端 Safari 也会触发灰度抗锯齿降级
translate3d(0, 0, 0) 不是解药，是加速开关
加 translate3d(0, 0, 0) 不会修复模糊，反而大概率让模糊更严重——它强制创建合成层，彻底堵死 CPU 渲染路径，等于告诉浏览器：“请用最糙的方式渲染这个文字”。
-
translate3d(0, 0, 0)不修正坐标小数，也不重置transform-origin对齐点 -
-webkit-font-smoothing: subpixel-antialiased在合成层内基本无效 - 若容器宽高是奇数（如
width: 201px），rotateY(180deg)的中心点落在 100.5px，纹理采样必然模糊
JS 动态设置 rotate 时必须显式取整
不能依赖浏览器自动舍入，也不能靠视觉“差不多”。JS 计算出来的角度哪怕只差 0.01°，最终都可能放大为像素级偏差。
- 正确写法：
element.style.transform = `rotate(${Math.round(angle)}deg)` - 动画中避免
rotate()和scale()混用——scale(1.2)把 16px 字体变成 19.2px，再rotate就是双重小数叠加 - 静态翻转优先用
transform: rotateY(180deg); backface-visibility: hidden;，不加translate3d或will-change
真正可控的源头控制手段
模糊只在变换结果含小数时发生，所以所有方案都要回到“让最终像素坐标为整数”这个原点。
- 容器设为偶数宽高：
width: 400px; height: 60px;，再配transform-origin: 50% 50%，确保中心点严格落在像素中心 - 缩放优先用整数比：
scale(1.25)（16px × 1.25 = 20px）比scale(1.2)安全得多 - 避免百分比 + 奇数尺寸组合：比如
height: 475px; transform: translateY(-50%)→ 产生 237.5px，直接改height: 476px或加margin-top: -238px
最容易被忽略的是：模糊往往只在设备像素比 > 1（如 Retina 屏、Windows 高 DPI 设置）下明显。开发时若只在标准屏测试，上线后用户看到的就是发虚文字。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
