纯CSS实现digit-flip翻牌动画需将数字拆为top/bottom两半，分别绕top/bottom轴旋转，配合backface-visibility:hidden和transform-origin精准控制，避免3D渲染残留与视觉割裂。
用 CSS 自定义 digit-flip 动画实现按钮内数字滚动
纯 CSS 实现翻牌效果最轻量，无需 JS 框架或第三方库。核心是把每个数字拆成上下两半（top 和 bottom），用 transform: rotateX() 控制翻转角度，配合 transform-origin: top 或 bottom 实现真实翻牌感。
常见错误是直接对整个数字元素做 3D 旋转——这样只有“翻面”，没有“翻页”错觉；必须让上半部分绕顶部轴翻、下半部分绕底部轴翻，才能模拟物理翻牌。
- 每个数字需包裹在独立容器中（如
<span class="digit"></span>），内部结构为：<span class="digit"> <span class="digit-top">1</span> <span class="digit-bottom">2</span> </span>
- 动画关键帧中，
.digit-top从rotateX(0deg)→rotateX(-180deg)，.digit-bottom从rotateX(180deg)→rotateX(0deg) - 务必设置
backface-visibility: hidden，否则翻转时背面数字会透出 - Chrome/Safari 支持良好，Firefox 需加
-moz-transform前缀（仅旧版本）
按钮点击触发翻牌：用 JS 控制 data-current 和 data-next
按钮本身不参与动画，只作为触发器。真正翻牌的是其内部的数字容器。推荐用 data- 属性管理状态，避免 DOM 重排。
典型做法是：点击后，先更新 data-next 值，再强制重绘（如添加临时 class），让 CSS 动画读取新旧值并执行过渡。
立即学习“前端免费学习笔记（深入）”；
- HTML 结构示例：
<button id="counter-btn"> <span class="counter-digit" data-current="5" data-next="6"></span> </button>
- JS 中不要直接修改
textContent，而是改dataset.next，再调用element.offsetWidth强制重排，再加flippingclass - 动画结束后移除 class，并同步
data-current = data-next，否则下次点击会从旧值翻起 - 若按钮频繁点击，需防抖或禁用按钮直到动画结束（
transitionend事件）
多位数字联动翻牌：避免逐位异步导致视觉割裂
多个 .digit 同时翻时，若各自用独立动画时间，容易出现“有的快有的慢”，看起来像卡顿或错位。必须统一控制时序。
最稳妥的方式是用 CSS 变量统一驱动所有数字的 animation-delay，或者用 JS 批量添加 class 并监听首个元素的 transitionend 再触发下一位——但后者复杂度高，不推荐。
- 给所有
.digit设置相同animation-duration（如0.4s），且不设animation-delay - 用
animation-timing-function: ease-in-out，比linear更自然 - 如果某位数字不变（如从 19→20，十位从 1→2，个位从 9→0），仍要触发翻牌动画，否则视觉不连贯；可通过比较
data-current和data-next字符串长度或逐位判断决定是否添加 class - 移动端要注意
will-change: transform可能引发渲染异常，建议只在动画期间动态添加
兼容性与性能陷阱：iOS Safari 的 3D 渲染 bug
iOS 15–16 的 Safari 对 transform-style: preserve-3d 有严重渲染残留问题：翻牌后旧数字残影不消失，尤其在快速连续点击时。
根本原因不是 CSS 写错，而是 WebKit 的 GPU 渲染管线未及时清空图层缓存。绕过方式很具体，且必须生效：
- 给翻牌容器（如
.digit）加transform: translateZ(0)或will-change: transform，强制创建独立图层 - 动画结束后，用
setTimeout(() => { el.style.transform = '' }, 0)清除 transform，防止图层滞留 - 避免在
:hover状态下触发翻牌动画——iOS Safari 对 hover + 3D transform 组合支持极差 - 若按钮含图标或文字混合布局，确保翻牌区域用
overflow: hidden包裹，否则翻转时边缘可能撕裂
翻牌动画的“真实感”来自上下半片的精确轴心对齐和 timing function 微调，而不是帧率高低；多数人花时间调 JS，其实该先校准 CSS 的 transform-origin 和 perspective 值。
