transform-style: preserve-3d 不解决文字模糊，反而加剧问题，因其触发多层GPU合成与双线性插值降级；真正需检查图层隔离、整数位移及避免opacity/filter等隐式提升属性。
transform-style: preserve-3d 不解决文字模糊，反而容易让问题更隐蔽、更难调。它既不修复亚像素渲染失效，也不阻止图层提升，纯粹是告诉浏览器“子元素按 3D 坐标合成”——而文字一旦被卷进多层 GPU 合成流，糊得更快。
为什么加了 preserve-3d 反而更糊
常见错误现象：给一个带 transform: rotateY(10deg) 的卡片容器设了 transform-style: preserve-3d，里面文字立刻发虚，甚至比不加时还严重。
根本原因在于合成层级爆炸：
- 父容器设
transform-style: preserve-3d+ 子元素有transform（哪怕只是translateZ(0)），就会触发嵌套合成层 - 文字被裹进至少两层 GPU 纹理中，每层都做一次双线性插值，抗锯齿逐级降级
- Chrome DevTools 的 Layers 面板里会看到文字区域被标红+多层叠叠，这就是糊的源头
- 如果同时加了
will-change: transform或backface-visibility: hidden，图层数翻倍，模糊加剧甚至伴随闪烁
真正该检查的三件事（不是加属性）
别在 transform-style 上打转，先确认是否踩了底层陷阱：
立即学习“前端免费学习笔记（深入）”；
- 打开 Chrome DevTools → Layers 面板，看文字所在元素是否被框出独立图层——只要标红，说明已被 GPU 合成，后续所有字体微调都是补救
- 检查动画或 JS 计算中是否有非整数位移：
translateX(50%)对应容器宽为199px时，结果是99.5px，强制舍入必糊 - 确认文字自身或其直系父容器有没有误加
opacity、filter、backface-visibility: hidden——这些单拎出来就能触发图层提升，比preserve-3d更直接
比 preserve-3d 更靠谱的写法
如果必须做 3D 效果且含文字，唯一稳定路径是隔离变换层级：
- 把
transform-style: preserve-3d和perspective只加在**最外层容器**（如.scene），文字元素本身不设任何transform、opacity、filter - 用
isolation: isolate包住文字父容器，防止它被意外拉进上级合成流 - 文字动效改用
color、text-shadow、font-size（配合transition）等不触发图层提升的属性 - 绝对避免
scale()动文字——哪怕scale(1.01)，GPU 位图缩放也会绕过字体光栅化
复杂点在于：你看到的“糊”，其实是浏览器主动放弃亚像素渲染的结果。控制权不在你怎么加属性，而在于让文字不动，或只动它该动的部分。
