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 轴位移就变成纯缩放，没有近大远小。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
-
perspective只能写在 .cube 的**直接父元素**上（例如 .scene），写在或滚动容器里，会导致视锥计算异常、元素消失或变形 - 父容器若含
overflow: hidden，会裁掉超出边界的 Z 轴投影，尤其在 rotateY 翻转时背面直接不可见；改用overflow: visible或扩大父容器尺寸 - 移动端小屏幕下，
perspective: 3000px反而削弱纵深感，建议控制在600px–1000px区间
backface-visibility: hidden 必须加在每个面元素上，而非父容器
移动端 GPU 渲染路径中，背面剔除（backface culling）依赖每个面的独立声明。漏掉任意一个 .face，翻转中途就会闪出背面内容，尤其在 touchstart/touchend 瞬间明显。
- 不是加在 .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 值越界而丢失
transform-style 的前缀要求和父容器 overflow 的隐式截断——这两点在桌面端可能凑合能过，但在 iOS 上几乎必然翻车。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
