纯css 3d翻牌最可靠，需正确设置transform-style: preserve-3d和backface-visibility: hidden；中奖逻辑须前置绑定，禁用重复点击；移动端需处理touch延迟与滚动冲突；ie11降级为淡入淡出。
翻牌效果用 CSS 3D 变换最可靠
纯 CSS 实现翻牌，比 JS 动画或 Canvas 更轻量、更易维护，且能自然响应 hover 和点击。关键不是写多少 JS，而是把 transform-style: preserve-3d 和 backface-visibility: hidden 配置对——漏掉任意一个，背面内容就会透出或翻转失效。
常见错误现象：transform: rotateY(180deg) 执行后卡片“消失”或“只翻一半”，基本都是父容器没设 transform-style: preserve-3d，或者子面没加 backface-visibility: hidden。
- 卡片容器（.card）必须设
transform-style: preserve-3d - 正面（.card-front）和背面（.card-back）都需设
backface-visibility: hidden - 翻转动画建议用
transition: transform 0.6s ease-in-out，太短（0.8s）交互迟滞
抽奖逻辑别在翻牌动画里做判断
用户点下卡片瞬间就该锁定奖品，而不是等翻转动画结束才执行逻辑——否则快速连点会触发多次请求或状态错乱。翻牌只是视觉反馈，中奖结果必须提前生成并绑定到对应卡片上。
使用场景：比如 3×3 翻牌格子，后台返回的中奖位置是 index: 4，那就直接给第 5 个 .card 加 data-prize 属性，如 data-prize="iPhone"，点击时读取即可。
- 避免在
transitionend事件里查接口或改 DOM，动画未完成就再次点击会导致事件堆积 - 翻牌前禁用按钮或加
pointer-events: none到已翻卡片，防止重复点击 - 如果要“随机选一张翻”，用
Math.random()+Math.floor()在初始化时就分配好奖品，别拖到点击时算
移动端 click 延迟和 touch 冲突要主动处理
在 iOS Safari 或部分安卓 WebView 里，单纯监听 click 会有约 300ms 延迟，用户会觉得“点了没反应”；而只用 touchstart 又容易和页面滚动冲突，导致误翻。
推荐做法：用 ontouchstart + preventDefault() 仅针对卡片区域，同时 fallback 到 click，并加 user-select: none 防文本选中干扰。
- 给卡片加
style="touch-action: manipulation"，这是现代方案，比手动阻止 touch 事件更安全 - 不要全局
preventDefault()on touchstart，只对卡片元素做，否则页面无法滚动 - 测试时务必在真机 Safari 上验证，模拟器常掩盖 touch 行为差异
IE11 及以下不支持 3D 变换？降级方案要简单有效
IE11 对 preserve-3d 支持不完整，翻牌会塌成平面切换。与其硬扛兼容，不如检测后直接切为淡入淡出：用 @supports not (transform-style: preserve-3d) 写独立样式块，背面默认隐藏，点击时 toggle opacity 和 visibility。
性能影响：CSS 3D 在低端 Android 机上可能掉帧，若监控到 FPS matchMedia('(prefers-reduced-motion: reduce)') 或运行时测 performance.now() 差值更可靠。
- 降级样式里避免用
transition: all，只写transition: opacity 0.3s, visibility 0.3s - IE 下
transform: rotateY会被忽略，但filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1)不推荐——太不可控 - 真正上线前，用 BrowserStack 测 Win7 + IE11 真实渲染，CSS 3D 在它上面表现和文档写的不一致是常态
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
