纯 CSS 3D 翻牌数字动画需用 transform-style: preserve-3d、perspective 和 backface-visibility 实现，仅更新变化位并校准时间差，避免跳帧与错位。
用 CSS 3D 翻牌动画实现数字翻转，别碰 jQuery 插件
原生 HTML + CSS 就能做出流畅翻牌效果，transform-style: preserve-3d 是关键。jQuery 插件（比如 flipclock.js）体积大、定制难、时间跳变时容易卡顿或错位，纯 CSS 方案更轻、更可控。
核心思路：每个数字用两个 <span>（front/back），共用一个父容器做 3D 旋转轴；翻动时让 front 向后翻、back 向前翻，靠 rotateX(180deg) 和 backface-visibility: hidden 控制显隐。
- 必须给父容器设
perspective（建议500px），否则 3D 效果塌陷 - 每个数字容器需设
transform-style: preserve-3d，否则子元素的 3D 变换不生效 - front 默认
rotateX(0)，back 默认rotateX(180deg)；翻牌时同时过渡这两个值 - 避免用
transition: all，只写transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)，更顺滑
数字更新逻辑要防抖，否则秒级翻动会撕裂
直接每秒 innerHTML 替换整个数字，会导致 DOM 重绘+重排，翻牌动画中断或跳帧。正确做法是只更新变化的数字位，并触发对应翻牌动画。
例如当前是 12:34:56，下一秒变成 12:34:57，只对“秒个位”那个容器执行翻牌动作，其他位保持不动。
立即学习“前端免费学习笔记（深入）”；
- 用
setInterval(() => { ... }, 1000)不可靠，浏览器节流或页面失焦会导致跳秒；改用requestAnimationFrame+ 时间差校准 - 每次计算当前时间时，用
new Date().getTime()对比上一次时间戳，修正毫秒级偏移 - 对每个数字位维护一个
currentDigit和targetDigit，仅当二者不等时才触发翻牌 class 切换（如加flipping） - 翻牌动画结束必须监听
transitionend事件清除 class，否则连续翻动会堆积状态
兼容性坑点：Safari 和旧版 Chrome 的 3D 渲染行为不一致
Safari（尤其 iOS 15 之前）对 backface-visibility 处理较严格，若父容器没设 -webkit-transform: translateZ(0)，back 面可能始终不可见；旧版 Chrome（
- 所有翻牌容器加
transform: translateZ(0)（或-webkit-transform: translateZ(0)）强制硬件加速 - 避免把翻牌单元直接放在
display: flex的容器里——改用display: inline-block或绝对定位布局 - 不要用
will-change: transform滥用，只在翻牌开始前临时加上，结束后移除，否则 Safari 内存暴涨 - 测试时务必在真机 Safari 打开，模拟器无法复现部分渲染 bug
时区与夏令时处理必须由 JS 控制，HTML 不能硬编码
翻牌时钟显示的是本地时间，但用户可能在跨时区场景下需要 UTC 或指定时区。HTML 本身不支持时区计算，全靠 JS 的 Date API 和 Intl.DateTimeFormat。
- 用
new Date().toLocaleTimeString('en-US', { timeZone: 'Asia/Shanghai' })获取目标时区时间，再拆解为时/分/秒数字 - 避免
getHours() / getMinutes()直接取值——它们返回的是本地时区值，不是目标时区 - 夏令时切换当天（如美国 3 月第二个周日），同一时间戳的
toLocaleTimeString可能返回不同小时数，需确保每秒都重新计算，不能缓存格式化结果 - 如果需显示 UTC，用
date.getUTCHours()等方法，但注意它不自动补零，得手动String(date.getUTCHours()).padStart(2, '0')
翻牌动画最脆弱的地方不在视觉，而在时间驱动逻辑和浏览器渲染管线的耦合——哪怕 CSS 写对了，JS 更新节奏一乱，整个翻牌就卡顿、错位、跳数。盯住时间戳校准和 DOM 更新粒度，比调贝塞尔曲线重要得多。
