水果弟你可能在机场、车站大屏、或者是手机上的翻页时钟小组件里见过这种效果——黑色的卡牌，数字像日历一样“啪嗒”一声翻过去，带着一点机械的阻尼感。这个效果用 HTML+CSS+JS 做起来，其实没有想象中复杂，核心也就几十行代码。它不依赖任何框架和库，是纯前端三件套的经典组合。
这个项目的价值在于：它同时练到了 CSS 3D 变换、DOM 状态同步、JS 定时器驱动这三块前端基本功。对刚学完 HTML/CSS/JS 基础、想找个练手项目的人来说，翻页时钟是一个非常好的过渡——从“会写静态页面”到“能写出带交互和动效的小应用”。这篇文章我会把原理、踩过的坑、完整代码一次性讲清楚，你跟着走一遍就能跑起来。
1. 整体设计思路：先想清楚翻页时钟是怎么“演”出来的
1.1 翻页效果的本质：一次“视觉欺骗”
先说结论：翻页时钟不是靠 JS 一帧一帧算动画算出来的，而是用 CSS 的 3D 变换做视觉欺骗。JS 只干一件事——到点了，告诉数字“该换了”。
真实的翻页钟翻动过程，你仔细观察的话，其实包含两个阶段：
- 旧数字的上半部分先像书页一样向下翻倒，露出下面新数字的上半部分。
- 紧接着，新数字的下半部分从水平位置向上立起，压在旧数字下半部分的上面。
这两个动作连起来，人眼看到的就是“整张卡片”翻了过去。但如果你拆开看，每一时刻屏幕上其实都是多个半层在配合演出。前端要复现这个效果，最直接的办法就是把这个过程拆成 CSS 动画，让旧上半张翻转，再让新下半张立起。
理解了这个原理，后面所有代码逻辑都好办了：我们不是在做一个“数字变化”，而是在做“两个半张纸片的翻动”。
1.2 为什么是 HTML+CSS+JS 三件套，而不是其他方案
有人可能问：纯 CSS 能不能做？纯 CSS 能做出翻转动画，但它拿不到当前时间，也无法决定“什么时候该翻、翻到几”。翻页时钟的核心驱动是时间数据，CSS 再厉害也只是展示层，数据层必须靠 JS。
也有人问：用 Canvas 画不是更炫吗？Canvas 当然能做，但为了一个简单的时钟去写 Canvas 绘制逻辑，代码量会明显增加，而且 DOM 的可访问性和可维护性都比 Canvas 好。翻页时钟的关键恰恰在于“用最简单的结构表达清晰的逻辑”，HTML 负责骨架、CSS