移动端 preserve-3d 渲染卡顿或失灵的直接原因是 ios safari（尤其 15.4 前）和安卓 webview 对 3d 上下文建立条件苛刻：漏 perspective、中间父级未设 preserve-3d、或存在 overflow: hidden/will-change 等中断属性，即降级为 flat 渲染，z 轴被拍平。
移动端 preserve-3d 渲染卡顿或失灵的直接原因
不是属性本身不支持，而是 iOS Safari（尤其 15.4 之前）和部分安卓 WebView 对 transform-style: preserve-3d 的上下文建立条件极其苛刻：漏掉 perspective、中间父级没设该属性、或存在 overflow: hidden/will-change: transform 等中断属性，就会直接降级为 flat 渲染——不报错，但 Z 轴坐标全被拍平，translateZ() 和 rotateY() 变成二维错觉。
perspective 值过大反而破坏体验
移动端屏幕小，过大的 perspective（比如 3000px）会导致翻转响应迟钝、缩放失真，且纵深感反而弱。真机上常表现为动画卡顿、元素“飘”、甚至触发重绘抖动。
- 推荐起始值：
perspective: 600px（iOS/Android 主流机型实测较稳） - 值太小（如
50px）：近处元素剧烈放大，边缘畸变，遮挡关系错乱 - 值太大（如
2000px）：趋近正交投影，translateZ(80px)和translateZ(160px)几乎看不出差异
uni-app 或 WebView 环境下基本不可靠
uni-app 编译到 App 端时，iOS 使用 WKWebView，Android 多用 X5 内核，二者对 transform-style: preserve-3d 的硬件加速支持严重阉割。常见现象是白屏、只显示正面、连续翻转卡死。
- 即使 CSS 全对，App 端也大概率退化——这不是代码问题，是底层渲染引擎限制
- v3.9.12+ 版本仅修复单层翻转（如卡片正反切换），不支持嵌套
preserve-3d或链式透视 - 真机调试必须做，模拟器无法复现真实降级行为
backface-visibility: hidden 加错位置等于没加
这个属性必须加在「正在执行 transition 或 animation」的元素自身上，比如 .card-front 和 .card-back 都要单独加 backface-visibility: hidden。加在父容器上完全无效，因为该属性不继承，Safari 也不会因此为子元素创建稳定合成层。
- 若背面需显示内容（如翻转后展示文字），对应元素得设
backface-visibility: visible，否则空白 - 别混用
transform: translateZ(0)和backface-visibility: hidden：iOS 16+ 中后者可能干扰图层决策 - 旧版 iOS 必须加前缀：
-webkit-backface-visibility: hidden
rotateY 怎么写，而是哪一层该设 perspective、谁该带 translateZ(0)、以及是否在 App 环境里提前放弃了纯 CSS 方案。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
