App端禁用transform-style: preserve-3d，因其在WKWebView/X5内核中渲染异常导致白屏或卡死；应改用@keyframes+绝对定位的伪3D方案，并为每张卡片维护独立翻转状态。
app端别碰 transform-style: preserve-3d，h5 和小程序能跑通的写法，在 ios 和部分安卓 app 里大概率白屏、卡死或只显示正面。
为什么 transform-style: preserve-3d 在 App 端失效
uni-app 编译到 App 时用的是 iOS 的 WKWebView 或安卓的 X5 内核，底层对 3D 变换的硬件加速和 CSS 解析存在严重阉割。不是你代码写错了，是运行环境不支持。常见现象包括：翻转中途背面消失、整个卡片区域变白、点击无响应、动画卡在 90° 不动。
即使加了 backface-visibility: hidden 或 perspective，只要父容器用了 transform-style: preserve-3d，就可能触发渲染异常。v3.9.12+ 虽有部分兼容补丁，但仅限单层正反切换，不支持嵌套或链式变换。
App 端稳定翻转：用 @keyframes + 绝对定位伪 3D
放弃“真 3D”，改用可控的“伪 3D”方案：正反面绝对定位叠在一起，靠 rotateY + z-index + visibility 切换，动画走预定义 @keyframes。
- 容器（如
.card-wrapper）设perspective: 1000rpx，且必须是翻转元素的**直接父级** - 正面和背面都用
position: absolute; top: 0; left: 0; width: 100%; height: 100%叠放 - 两面均加
backface-visibility: hidden，防止翻转中透出另一面 - 用
@keyframes flip { 0% { transform: rotateY(0); } 100% { transform: rotateY(180deg); } }定义动画 - 翻转时给容器加类（如
.flipped），通过.flipped .front { visibility: hidden; }和.flipped .back { visibility: visible; }控制显隐 - 务必同时加
transition: visibility 0.6s，否则visibility切换会闪
列表中每张卡片独立翻转怎么管状态
共用一个 isFlipped 布尔值会导致所有卡片同步动作——这是最常踩的坑。必须为每项维护独立状态。
- 用数组存状态：
cardStates: [false, false, true, false]，v-for渲染时绑定:class="{ flipped: cardStates[index] }" - 点击事件传索引：
@click="toggleFlip(index)"，内部执行this.cardStates[index] = !this.cardStates[index] - 不要在
data里写isFlipped: false，那是个全局开关 - 如果卡片数据来自 API，建议初始化时用
cards.map(() => ({ flipped: false }))构建状态数组，避免响应式失效
翻转动画卡顿或镜像文字？检查这三点
真机上翻转看起来“不对劲”，往往不是逻辑问题，而是渲染细节没对齐：
- 背面内容镜像显示 → 检查是否漏了
.back { transform: rotateY(180deg); }，否则文字会随容器旋转而反向 - Android 低端机卡顿 → 改用
animation替代transition，避免触发动态样式计算；也可检测平台：uni.getSystemInfoSync().platform === 'android'后改用rotateZ（更轻量） - 翻转过程闪屏 → 确认
perspective是否写在了翻转容器的**直接父元素**上；检查是否遗漏backface-visibility: hidden；visibility必须配transition，不能只靠animation
复杂点在于：同一套 CSS 在 H5、小程序、App 三端表现不一致，而你没法用条件编译切样式——最终方案往往是 App 单独一套伪 3D，H5/小程序用标准 3D，靠平台判断动态加载 class 或 animation 名称。这点容易被忽略，但决定了上线后有没有用户投诉“抽卡抽不出来”。
