旧版浏览器中rotate()发虚锯齿的根本原因是未启用gpu合成，而是退化为cpu渲染+双线性插值；需配合translatez(0)等真3d变换触发gpu加速，仅preserve-3d无效。
旧版浏览器里 rotate() 一转就发虚、有锯齿，根本原因是没走 GPU 合成
Chrome/Safari 旧版本（比如 Safari 9、Android 4.4 WebView）、Firefox 早期版本对 transform 的软件渲染路径不完善，尤其在非整数角度旋转时，会退化为 CPU 渲染 + 双线性插值，边缘立刻出现明显锯齿或模糊。这不是 CSS 写错了，是渲染管线没被正确触发。
加 transform-style: preserve-3d 本身不能单独解决锯齿
这个声明常被误传为“万能抗锯齿开关”，但它实际作用只是告诉父容器：子元素的 3D 变换要保留在同一个 3D 渲染上下文中——它不启用 GPU 加速，也不修改采样方式。单独加这行：transform-style: preserve-3d，而没配 transform 中的 3D 成分（如 translateZ(0) 或 rotateX()），浏览器根本不会理会它。
- 必须配合至少一个真 3D 变换才能生效，例如：
transform: rotate(45deg) translateZ(0) - 若父容器已设
transform-style: preserve-3d，但子元素只用rotate(45deg)（2D），锯齿照旧 - 在 Firefox 中，
preserve-3d对抗锯齿几乎无效；它更依赖backface-visibility: hidden或-moz-transform: rotateZ(45deg)等私有写法
真正起效的组合方案（兼容旧版关键）
针对 Safari 8–10、Android Browser 4.0–4.3、Firefox
- 强制启用合成层：
transform: rotate(45deg) translateZ(0)（比will-change兼容性更好） - 关闭背面绘制（尤其翻转/3D 场景）：
backface-visibility: hidden，Safari 和旧 Android 必加 - Firefox 专用兜底：
-moz-transform: rotate(45deg)+-moz-backface-visibility: hidden - 极少数情况（如纯边框元素）可补一刀：
outline: 1px solid transparent，火狐下对消除轮廓锯齿有效
示例：
.rotating-icon {
transform: rotate(30deg) translateZ(0);
-moz-transform: rotate(30deg);
backface-visibility: hidden;
-moz-backface-visibility: hidden;
outline: 1px solid transparent;
}
别踩的坑：blur(0.1px) 在旧浏览器里可能失效或变糊
filter: blur(0.1px) 看似简单，但在 Android 4.4 WebView 和 Safari 9 中要么被忽略，要么把整个元素软化成一团——它不是抗锯齿，是强行模糊边缘，和硬件加速路径无关。除非你明确只支持 Chrome 49+ / Edge 12+，否则不要把它当主力方案。
真正容易被忽略的是：锯齿从来不是“旋转导致的”，而是“该走 GPU 却走了 CPU”时的副产品。所以重点永远在如何稳定触发合成层，而不是调滤镜或改字体平滑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
