App端（尤其iOS）因WKWebView等引擎限制，transform-style: preserve-3d基本失效，子元素被拍平致背面不可见或崩溃；应改用rotateY+perspective+opacity伪3D方案，并严格隔离平台样式。
App端（尤其是iOS）无法可靠运行 transform-style: preserve-3d + rotateY 的纯CSS 3D翻转，点击后白屏、卡死、只显示正面是常态，不是配置问题，是引擎限制。
为什么 App 端的 transform-style: preserve-3d 基本失效
uni-app 在 App 端使用的是 WebView 渲染（iOS 是 WKWebView，Android 多为系统 WebView 或 X5），它们对 CSS 3D 上下文的支持非常保守。即使你写了 perspective 和 preserve-3d，子元素仍大概率被拍平到同一平面——导致背面不可见、动画跳变、或直接触发渲染崩溃。这不是写法错误，而是底层 Webview 不解析完整的 3D transform 栈。
实操建议：
- 不要在 App 端尝试用
preserve-3d实现多层嵌套翻转（比如卡片内再放带 rotateZ 的文字） - 避免在翻转过程中调用
uni.createSelectorQuery().select().boundingClientRect()，动画帧期间 layout 可能未就绪，返回null - 若必须用 3D 效果，优先降级为伪 3D：
rotateY+scale+opacity组合模拟深度感，不依赖preserve-3d
@tap 触发翻转时，transition 不生效的常见原因
点击后没动画、瞬间切换、或只动一半，多数是因为样式层级或触发时机不对。
立即学习“前端免费学习笔记（深入）”；
实操建议：
-
perspective必须设在翻转容器的**直接父元素**上，例如：<view class="card-wrapper"><view class="card"></view></view>，样式写在.card-wrapper，不能写在.card或更外层 -
.card必须显式声明backface-visibility: hidden;，否则 iOS 下背面可能透出或镜像显示 - 别用
:class="{ flipped: isFlipped }"动态切类名后立刻读取 DOM 宽高——Vue 的响应式更新和样式计算有微小延迟，可加nextTick或setTimeout(..., 16)延迟读取 - 确保
transform初始值明确，比如transform: rotateY(0deg);，不要靠浏览器默认值
App 端可用的稳定翻转方案：animation + rotateY 伪 3D
放弃 preserve-3d，改用单层 rotateY 配合 perspective 和视觉补偿，性能稳、兼容强。
示例关键代码：
.card-wrapper {
perspective: 1000rpx;
}
.card {
width: 280rpx;
height: 400rpx;
position: relative;
backface-visibility: hidden;
transform-style: flat; /* 显式关闭 3D，避免歧义 */
}
.card.flipped {
animation: flip 0.6s ease-in-out forwards;
}
@keyframes flip {
0% { transform: rotateY(0deg); }
50% { transform: rotateY(90deg); opacity: 0.7; }
100% { transform: rotateY(180deg); }
}说明：
- 不用
transition，改用@keyframes+forwards，规避部分 Android WebView 对 transition 的重绘 bug - 中间帧加入
opacity衰减，掩盖旋转过程中的边缘锯齿或贴图拉伸 -
transform-style: flat是显式声明，防止某些低版本引擎误启用 preserve-3d - 卡片正反面内容需各自加
transform: rotateY(180deg)矫正镜像（否则背面文字是反的）
小程序和 H5 能用但 App 不能用的写法，务必隔离
如果你的项目要同时发布到小程序、H5 和 App，千万别共用同一套翻转样式。App 端的渲染路径和事件调度逻辑与其它平台完全不同。
实操建议：
- 用
process.env.UNI_PLATFORM === 'app-plus'做平台判断，在 JS 中动态绑定不同 class 名 - 在 CSS 中用
@supports (transform-style: preserve-3d)包裹 H5/小程序专用样式，App 端自动跳过 - uni-app v3.9.12+ 对 App 端
rotateY做了单层补丁，但仅限「正→反」「反→正」这种二态切换，不支持连续拖拽角度（如手势控制翻转 30°/60°/120°） - 如果业务强依赖流畅拖拽翻转（比如 3D 商品查看），建议 App 端直接用原生插件或 WebView 内嵌 Three.js，CSS 方案已到能力边界
真正卡住的点从来不是“怎么写动画”，而是“哪一层该设 perspective”“哪一行该加 backface-visibility”“哪个平台该砍掉哪段 CSS”。这些细节不试错三遍以上，很难凭经验预判。
