老安卓机 perspective 无效是因 WebView 未实现 3D 渲染上下文，仅解析语法却降级为 flat 渲染，导致 translateZ/rotateY/backface-visibility 失效；需用 getBoundingClientRect 对比检测 3D 支持并降级为 opacity+scale 模拟。
CSS perspective 在老旧 Android 机型上基本不生效，不是写法问题，而是 WebView 渲染引擎压根没实现 3D 上下文重建逻辑——它会静默降级为 flat 渲染，rotateY() 变成平面旋转，translateZ() 完全被忽略。
为什么老安卓机 perspective 看不到效果？
Android 4.4–6.0 的系统 WebView（基于旧版 Chromium 30–53）对 perspective 和 transform-style: preserve-3d 的支持是残缺的：它能解析语法，但无法建立真正的 3D 渲染上下文。结果就是所有 Z 轴操作被拍平，backface-visibility: hidden 也失去作用，翻转到 90° 时正反面同时显示、重叠闪烁。
- 不是 CSS 写错了，而是浏览器根本不认这组属性组合
- 查
getComputedStyle(el).transformStyle返回flat，而非preserve-3d，即可确认降级 - 这类机型普遍不支持
will-change: transform，强行加反而触发额外重绘卡顿
检测并降级为 2D 翻转的可靠方案
不能依赖 UA 字符串（易伪造、覆盖不全），要用运行时能力检测：
- 创建一个临时
<div>，设 <code>transform-style: preserve-3d和transform: translateZ(1px) - 用
getBoundingClientRect()对比前后 top/left 值：若无变化，说明 Z 轴未生效 → 触发降级 - 降级后改用
opacity+scale(0.98)模拟“翻转感”，配合transform: rotateY(0deg)切换类名控制显隐
示例检测逻辑：
立即学习“前端免费学习笔记（深入）”；
function supports3D() {
const el = document.createElement('div');
el.style.cssText = 'transform-style: preserve-3d; transform: translateZ(1px); position: absolute; left: 0;';
document.body.appendChild(el);
const before = el.getBoundingClientRect().left;
el.style.transform = 'translateZ(100px)';
const after = el.getBoundingClientRect().left;
document.body.removeChild(el);
return before !== after;
}
绕过 WebView 缺陷的替代渲染路径
如果必须保留视觉翻转，且目标用户集中在低端安卓机，可放弃纯 CSS 方案：
- 用
<canvas></canvas>手动绘制正反两面，通过requestAnimationFrame控制 Y 轴旋转角度和透视缩放（模拟perspective投影） - 或改用 SVG +
transform，SVG 的transform在老 WebView 中兼容性远好于 CSS 3D - 避免任何依赖
backface-visibility或preserve-3d的动画库（如 GSAP 的 3D 模块），它们在这些机型上会直接报错或静默失败
真机调试时最常被忽略的一点
老旧 Android 机型的 GPU 内存极小，一旦页面中存在多个 perspective 容器（哪怕已降级），仍可能触发强制软渲染，导致整页滚动卡顿。必须确保：降级后移除所有 perspective、preserve-3d、backface-visibility 相关样式声明，而不是仅靠 JS 切换 class 隐藏——残留的 CSS 规则仍会被解析和尝试渲染。
