直接用 transform: rotatex() 错位因旋转中心默认为元素中心，而数字翻牌需绕中线共轴翻转；正确做法是用独立.flip-card容器包裹.front/.back，设perspective与preserve-3d，js控制状态切换与内容更新。
为什么直接用 transform: rotateX() 做数字翻牌会错位
因为 rotateX() 作用在元素自身坐标系，而数字翻牌需要“绕中线翻转”，且前后两面（当前数字和下一个数字）必须严格对齐、共用同一旋转轴。若直接对单个 div 应用 rotateX()，翻转中心默认是元素中心，但数字上下边缘厚度、字体行高、父容器 line-height 微小差异都会导致视觉偏移——看起来像“抖动”或“错层”。
真正可行的做法是：用两个子元素（.front 和 .back）构成一个翻牌单元，包裹在 .flip-card 容器内，该容器设置 perspective 和 transform-style: preserve-3d，再由 JS 控制翻牌状态与内容切换。
--current-digit 和 --next-digit 自定义属性怎么驱动翻牌
CSS 自定义属性本身不触发重绘，但配合 attr() 不可用、无法绑定 DOM 文本，所以不能直接靠它更新数字内容；它的作用是**控制动画状态与样式变量**。
实际做法是：
- JS 检测数字变化（如从
29→30），只对个位、十位等发生变化的数位，动态设置style.setProperty('--next-digit', '0') - CSS 中用
@keyframes定义翻转过程，其中transform不依赖变量，但可借助--next-digit控制opacity或z-index切换时机 - 关键过渡靠 class 切换：JS 添加
flipping类 → CSS 动画执行 → 动画结束时 JS 替换.back的textContent并重置.front，再移除flipping - 自定义属性更适合做全局配置，比如
--flip-duration: 0.4s、--flip-perspective: 200px，避免硬编码在多个 keyframes 里
每个数位必须独立封装为 .flip-card，不能共用容器
这是最容易被忽略的结构性错误。如果所有数字（个、十、百位）塞进同一个 .flip-card 容器：
- 翻牌动画会同步触发，失去真实感（比如秒变分钟时，所有位一起“啪”地翻过去）
- 无法单独控制某一位是否翻动（例如只变个位，十位保持不动）
- JS 更新逻辑耦合严重，
value.toString().split('')后需逐位比对旧值，否则会误翻 - 容器高度浮动会导致
transform-origin: center center失效——必须设固定高度（如height: 60px），否则翻转轴漂移
翻牌动画结束时，.back 内容替换必须卡在 50% 关键帧之后
CSS 动画无法在中间插入 DOM 操作，所以纯 CSS 无法实现“先翻到背面 → 换内容 → 翻回正面”。必须靠 JS 协同：
- 动画定义为
@keyframes flip { 0% { transform: rotateX(0); } 50% { transform: rotateX(90deg); } 100% { transform: rotateX(180deg); } } - JS 在开始翻牌时，先将
.back.textContent设为目标数字，再添加flipping类 - 用
setTimeout(() => { /* reset front & back */ }, duration * 0.5)在 50% 时刻重置.front为新值（为下次翻牌准备），同时确保.back已就位 - 务必设置
backface-visibility: hidden，否则翻转过程中正反面会同时透出
最复杂也最容易被跳过的点是：翻牌不是“播放动画”，而是“状态同步 + 动画反馈”。自定义属性在这里只起辅助作用，核心逻辑仍在 JS 对 DOM 的精准控制和 CSS 对 3D 变换的稳定支撑上。字体抗锯齿、perspective 值过小、未设 transform-style: preserve-3d —— 这三者任一缺失，都会让翻牌看起来像抽搐而非翻转。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
