uni-app中实现稳定卡片翻转需禁用transform-style: preserve-3d，改用正反面绝对定位+rotateY切换visibility，并配合perspective、backface-visibility:hidden及z-index分层控制。
uni-app 里用 CSS 3D 实现卡片翻转，别碰 transform-style: preserve-3d 的坑
uni-app 的 WebView 容器（尤其是 iOS WKWebView 和部分安卓 X5 内核）对 transform-style: preserve-3d 支持极不稳定，开了反而常导致翻转卡顿、背面消失、甚至整个视图白屏。真要翻转，得绕开这个属性，用「正反两面绝对定位 + rotateY 切换 visibility」更稳。
- 只给父容器设
perspective（比如perspective: 1000px），子元素不设transform-style - 正面和背面都用
position: absolute; top: 0; left: 0; width: 100%; height: 100%叠在一起 - 翻转时，正面加
transform: rotateY(180deg)，背面加transform: rotateY(0deg)，再配合visibility: hidden/visible控制显示 - 动画必须加
transition: transform 0.6s ease-in-out, visibility 0.6s，否则 visibility 切换会闪
抽卡效果的关键不是“动”，是“停顿节奏”和“层级遮罩”
用户感知的“抽卡感”来自三次停顿：启动延迟 → 快速旋转 → 悬停 → 缓慢揭晓。纯 CSS 动画很难精准控制中间态，推荐用 animationiteration 或 setTimeout 配合 transform 手动驱动。
- 不要用单个
@keyframes从 0° 转到 3600°，而是分三段：前 0.2s 加速旋转，中段 0.3s 匀速狂转，最后 0.5s 减速+定格+揭晓 - 揭晓瞬间必须用一层半透黑色遮罩（
z-index高于卡片但低于弹窗）盖住旋转过程，避免看到“未渲染完成”的卡面 - 安卓低端机上
rotateZ比rotateY更流畅，可检测uni.getSystemInfoSync().platform === 'android'后动态切轴
uni.createAnimation 在真机上大概率失效，别当主力
uni.createAnimation 在 H5 和微信小程序表现尚可，但在 App 端（尤其 iOS）经常动画不触发、export() 后样式没更新、或多次调用后内存泄漏。它本质是往 DOM 上打内联 style，而 uni-app 的 App 编译层对 style 更新有延迟。
- 真机调试时，优先用原生 CSS class 切换 +
addClass/removeClass触发重排 - 若必须用 JS 控制，改用
view元素的style.transform直接赋值字符串（如element.style.transform = 'rotateY(90deg)'），比 animation 实例更可控 - 所有动画结束回调，统一监听
transitionend事件，别依赖animation的end回调
卡片翻转 + 抽卡组合时，z-index 和 backface-visibility 必须手动关
两个动效叠加时，背面卡片在翻转中途可能意外穿透显示，或抽卡旋转时背面内容“透底”。这不是 bug，是 3D 渲染层叠规则没显式约束。
- 每张卡片容器必须设
backface-visibility: hidden，强制隐藏不可见面 - 翻转中的卡片，其父级需设
z-index: 10；抽卡遮罩层设z-index: 11；最终揭晓弹窗设z-index: 12——不能靠默认文档流 - App 端
z-index在scroll-view里会失效，此时必须把卡片提级到页面根节点下（用uni.showModal类似逻辑挂载）
perspective 和 scroll-view 滚动，这时哪怕只是轻微滑动，翻转也会跳帧或卡死。解决方案就一个：抽卡动效期间，用 uni.pageScrollTo 锁死滚动，动效结束再恢复。 
