transform-style: preserve-3d 在移动端必须逐级显式声明且加-webkit前缀，否则Safari≤14.5和部分Android WebView直接退化为flat；perspective须设于直接父容器、避免overflow:hidden截断，backface-visibility:hidden需加在每个面元素上。

transform-style: preserve-3d 在移动端必须逐级显式声明

移动端 Safari（≤14.5）和部分 Android WebView 会直接忽略未加前缀的 transform-style: preserve-3d，导致所有子元素被拍平成 2D。这不是兼容性“可能失效”，而是明确不生效。

• 必须同时写 transform-style: preserve-3d 和 -webkit-transform-style: preserve-3d
• 该属性不继承：父容器设了，子容器没设 → 子容器内再嵌套的 3D 元素（比如立方体某一面里的图标）立刻退化为 flat
• 常见错误是只在最外层 .cube 上设，但忘了 .face 内部若还有旋转动画，就得在 .face 上也加一遍

perspective 必须作用于直接父容器，且不能被 overflow: hidden 截断

移动端渲染管线对 perspective 的层级敏感度比桌面端更高——写错一层，Z 轴位移就变成纯缩放，没有近大远小。

• perspective 只能写在 .cube 的**直接父元素**上（例如 .scene），写在 <body> 或滚动容器里，会导致视锥计算异常、元素消失或变形
• 父容器若含 overflow: hidden，会裁掉超出边界的 Z 轴投影，尤其在 rotateY 翻转时背面直接不可见；改用 overflow: visible 或扩大父容器尺寸
• 移动端小屏幕下，perspective: 3000px 反而削弱纵深感，建议控制在 600px–1000px 区间

backface-visibility: hidden 必须加在每个面元素上，而非父容器

移动端 GPU 渲染路径中，背面剔除（backface culling）依赖每个面的独立声明。漏掉任意一个 .face，翻转中途就会闪出背面内容，尤其在 touchstart/touchend 瞬间明显。

Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries

规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...

下载

• 不是加在 .cube 上，而是每个面都要单独加：.front, .back, .left, .right, .top, .bottom { backface-visibility: hidden; }
• 配合 will-change: transform 可提前触发硬件加速，但仅对频繁变换的面启用，避免过度触发重绘
• Android Chrome 中若仍闪烁，可尝试加 transform: translateZ(0) 强制图层提升

translateZ 数值需匹配 perspective 范围，否则会被裁剪

移动端 viewport 尺寸小，Z 轴超出透视视锥后不是“变小”，而是直接被裁掉——你看到的不是缩小的面，是它彻底消失了。

立即学习“前端免费学习笔记（深入）”；

• perspective: 800px 时，translateZ(900px) 的元素已位于观察者后方，大概率不可见
• 安全做法：立方体边长为 200px，则各面 translateZ(100px)；卡片类翻转用 translateZ(60px) 更稳妥
• 调试时临时加 opacity: 0.7 和细边框，能快速定位哪个面因 Z 值越界而丢失

实际项目里最容易被忽略的，是 Safari 对 transform-style 的前缀要求和父容器 overflow 的隐式截断——这两点在桌面端可能凑合能过，但在 iOS 上几乎必然翻车。