最稳妥结构是嵌套，内含和
数字翻牌效果用什么 HTML 结构最稳妥
直接用 <span></span> 套 <div> 做翻牌单元，别用语义化标签（比如 <code><time></time> 或 <output></output>）——它们在 CSS 3D 变换下容易触发渲染异常，尤其在 Chrome 115+ 和 Safari 17 中会丢帧或卡顿。
每个数字位推荐结构：
<div class="flip-digit" data-value="7">
<div class="flip-inner">
<div class="flip-top">6</div>
<div class="flip-bottom">7</div>
</div>
</div>
其中 data-value 存目标值，用于 JS 对比和触发动画；.flip-top 和 .flip-bottom 分别对应“当前值”和“目标值”的视觉层。
CSS 翻牌动画的关键 transform 组合
只靠 rotateX(180deg) 不够，必须配合 transform-style: preserve-3d 和精确的 backface-visibility: hidden，否则在部分安卓 WebView（如微信内置浏览器）里会看到双层数字重叠。
核心样式要点：
-
.flip-inner需设transform-style: preserve-3d，且高度固定（不能用em或%） -
.flip-top初始transform: rotateX(0deg)，动画中变为rotateX(-180deg) -
.flip-bottom初始transform: rotateX(180deg)，动画中变为rotateX(0deg) - 务必加
will-change: transform到.flip-inner，否则 iOS Safari 滚动时易掉帧
JS 如何避免连续更新导致翻牌错乱
数据大屏常每秒刷新一次，如果直接对每个 data-value 调用翻牌函数，会出现数字跳变、中间态残留、甚至翻到一半卡住——本质是上一帧动画未结束就覆盖了 DOM 状态。
解决方式：
- 用
getComputedStyle(el).transform检查.flip-inner是否还在动画中，再决定是否启动新翻牌 - 给每个数字位加防抖标记：
el.dataset.isFlipping = 'true'，动画end事件里清空 - 数值变化为 0→1 或 9→0 时，强制走“先翻到 9/0，再翻到目标”，避免因 CSS 缓动函数导致视觉偏差
- 不要用
setTimeout模拟延迟，改用requestAnimationFrame+ 时间戳比对，更贴合大屏高刷需求
IE11 兼容或低端 Android 设备怎么降级
纯 CSS 3D 翻牌在 Android 4.4 WebView 或 IE11 上基本不可用：不支持 preserve-3d，transform 降级成 2D 后上下层错位。
安全降级策略：
- 用
document.documentMode或!!window.MSInputMethodContext检测 IE - 对 Android navigator.userAgent.match(/Android\s[1-4]\./) 判断
- 命中降级条件后，直接切换为淡入淡出：
opacity: 0 → 1+transition: opacity .3s，同时移除所有 3D transform - 保留同一套 JS 逻辑，只替换 CSS 类名（如从
flip-digit-3d切到flip-digit-fade），避免分支过多难维护
翻牌效果看着炫，但真正卡住项目的往往是动画状态没清理干净，或者在 canvas 叠加层上强行加 CSS 动画——这两处一旦出问题，连 console 都不报错，只能靠 performance 面板看 layout 波动。
