翻牌错位因未隔离3D坐标系：需用.top/.bottom双层+统一transform-origin+perspective+backface-visibility隐藏背面，禁用display:none改用opacity/visibility控制显隐。
为什么直接用 transform + transition 做翻牌会错位
翻牌动效的核心是让数字上下半部分绕 X 轴旋转 180°，但很多人一上来就给整个 .digit 元素加 transform: rotateX(180deg)，结果发现翻转后位置偏移、上下数字重叠或留白——这是因为没隔离翻转的坐标系。CSS 的 transform-origin 默认在元素中心，而翻牌需要以“中线”为轴，且上下两层必须共用同一旋转原点，否则视觉断裂。
正确做法是：每个数字用两个子元素（.top 和 .bottom），包裹在 .face 容器里，并统一设置 transform-origin: top center（上半部）和 transform-origin: bottom center（下半部），再通过 backface-visibility: hidden 消除背面透出。
- 必须给父容器（如
.digit）设perspective: 200px，否则 rotateX 无 3D 感 -
.top初始rotateX(0)，翻牌时变为rotateX(180deg)；.bottom初始rotateX(-180deg)，翻牌时变为rotateX(0) - 避免用
display: none控制显隐——它会破坏动画流，改用opacity或visibility配合z-index
如何用 CSS 自定义属性驱动动态数字切换
纯 CSS 实现「从 123 → 456」的逐位翻牌，不能靠 JS 改 class 触发动画，得靠属性变化触发重绘。最稳的方式是用 data-digit 属性存目标值，配合 attribute selector 写多组 keyframes，但实际项目中位数不确定，写死不现实。所以推荐用 CSS 自定义属性 + @property（Chrome 103+ / Safari 16.4+ 支持）做数值插值：
/* 必须注册，否则 animation-timing-function 对 --digit-value 无效 */
@property --digit-value {
syntax: '<number>';
inherits: false;
initial-value: 0;
}然后用 animation: flip 0.5s ease-in-out 驱动 --digit-value 变化，再用 counter-set 或 attr() + calc() 把数值映射到对应数字的 background-position 或 clip-path——但更常用的是结合 JS 设置 style.setProperty('--digit-value', next)，CSS 只管动画。
立即学习“前端免费学习笔记（深入）”；
- IE 和旧版 Safari 不支持
@property，降级方案：JS 控制 class 切换（如.digit--to-7），配合预设的 keyframes - 不要用
content: attr(data-digit)做数字显示——它无法触发重排，翻牌会卡在旧值 - 多位数需为每位单独套一层
.digit，并用will-change: transform提前提示渲染引擎
滚动翻牌器（Ticker）与单次翻牌的关键区别
Number Ticker 的典型表现是：数字像机械表一样「滚动上升」，新数字从下方顶入、旧数字从上方滑出，中间有短暂双数字并存的过渡帧。这和「翻牌」（flip）是两种动效逻辑：翻牌是绕 X 轴旋转，Ticker 是沿 Y 轴位移 + opacity 渐变。
实现 Ticker 更轻量：每个 .digit 内放 11 个数字（0–9 + 一个冗余位），用 transform: translateY() 控制整体偏移，再用 overflow: hidden 截断。当目标数字变化时，先将容器下移 1 行高度（显示下一个数字），再补一帧让其归位——视觉上就是「滚上去」。
- 关键帧只需两步：
0% { transform: translateY(0) }→50% { transform: translateY(-1em) }→100% { transform: translateY(0) } - 必须设
line-height: 1和font-size一致，确保1em= 单个数字高度 - 多个数字同步滚动时，别用同一个 animation-delay —— 人眼会感知到微小不同步，改用 JS 控制每个
.digit的animation-play-state分时触发
移动端 Safari 上翻牌动画卡顿的修复点
iOS 15–16 的 WebKit 对 transform: rotateX 的硬件加速支持不稳定，尤其嵌套多层或开启 will-change 后反而掉帧。实测有效的优化组合只有三个：
- 把
.digit提升为独立合成层：transform: translateZ(0)或will-change: transform（仅在动画触发前加，结束立即移除） - 禁用
-webkit-backface-visibility: hidden（旧写法），只保留标准backface-visibility: hidden - 动画 duration 控制在 0.3–0.4s，过长会触发系统节流；避免在
scroll事件里连续触发翻牌，改用IntersectionObserver或requestAnimationFrame节流
最常被忽略的是：iOS 上 perspective 值如果小于 100px，rotateX 会失真；大于 500px 又导致旋转弧度太缓——实测 perspective: 300px 是兼容性与观感的平衡点。
