纯CSS实现翻页时钟：3D变换、动画时序与状态管理的完整指南-代码聚汇网

做翻页时钟是我去年折腾前端动画时顺手写的一个小项目，本来只是想在桌面上放一个好看的倒计时组件，结果越做越上瘾，把CSS 3D变换、动画时序、状态管理全摸了一遍，顺手还踩了几个特别隐蔽的坑。今天就把这套完整实现拆开揉碎讲一遍，从原理到代码到排错，适合刚学完HTML/CSS/JS基础、想找个项目练手的朋友，也适合工作中突然被安排做可视化大屏或者时钟组件的老哥直接抄作业。

先说清楚这个翻页时钟是什么。它模拟的是老式机械翻页钟（就是机场、火车站常用的那种翻牌显示），数字不是整体跳变，而是像日历牌一样，上半页先翻下来，下半页再翻上去，形成一个连续、机械感十足的换字效果。纯用CSS去还原这个物理过程，核心就三件事：一个合理的DOM结构、两处关键的transform动画、一套准确的时间驱动逻辑。三者配合好了，效果比很多JS动画库做出来的还干净。

1. 整体设计思路拆解：为什么翻页时钟值得自己写

1.1 翻页时钟的本质是一个“3D视觉欺骗”

很多人第一次看到翻页效果，会以为需要用到Canvas或者WebGL，其实完全不用。翻页钟的视觉核心，是让一个平面元素绕着水平轴旋转，并且配合overflow:hidden裁剪，让观众只看到“上半片”或者“下半片”的内容。这本质上是一个利用CSS 3D变换和裁剪区域造出来的视觉假象，我称之为“两层半结构”。

拆解一下单个数字在翻页瞬间的画面：

上半部分：显示当前数字（比如3），静止不动。
下半部分：已经提前显示下一个数字（比如4），静止不动。
动片上：从水平位置开始，绕卡片中轴往下翻，内容显示新数字4，盖住上半片。
动片下：从已经翻转90度的位置开始，继续往下翻到水平，内容显示当前数字3，盖住下半片。

翻译成CSS语言就是：容器设置transform-style: preserve-3d，让子元素在3D空间里旋转；翻转的两个动片设置transform-origin，一个在底部（rotateX从0到-90度），一个在顶部（rotateX从90度到0度）。再加上backface-visibility: hidden，防止旋转过程中露出背面的镜像内容。

这个方案的好处是显而易见的：完全不需要JS参与动画过程，JS只负责在整秒切换时给DOM添加一个触发类名，CSS动画自己跑完。这样动画的性能由浏览器合成器处理，不会阻塞主线程，即使同时渲染几十个翻页卡片也不会掉帧。

1.2 纯CSS方案和JS动画方案怎么选

我最初试过用JS去驱动每一帧的rotateX角度，比如用requestAnimationFrame更新DOM style，效果确实也能做出来，但有两个问题：一是代码量翻倍，二是容易在快速连续翻页时出现状态混乱。后来改成纯CSS动画，用transition配合预置类名，整个逻辑一下子清晰了。

我的建议是：只要翻页频率不高于每秒1次（时钟就是典型场景），优先用CSS transition方案。它不仅代码更少，而且浏览器对transform和opacity的动画做了GPU加速，肉眼看起来更顺滑。反而用JS逐帧算角度的方案，稍不注意就会触发大量的重排和重绘，尤其是在低端设备上掉帧严重。

选型这件事上，我个人的取舍标准很简单：动画本身是“状态驱动的”，就用CSS；动画需要每一帧根据用户交互或外部数据动态计算（比如拖拽翻页、惯性滚动），才用JS。翻页钟属于前者，硬用JS反而给自己找麻烦。

1.3 组件整体架构：三组面板加两组业务逻辑

做之前先把整个组件拆成独立模块，别一上来就埋头写代码。我习惯在脑里过一遍数据流：系统时间 → JS格式化 → DOM更新 → CSS动画 → 用户视觉反馈。

具体到DOM结构，整个时钟由三部分组成：

小时面板：两位数，范围00-23。
分钟面板：两位数，范围00-59。
秒钟面板：两位数，范围00-59。

每一组面板内部，又是一个可复用的“单张翻页卡”结构。每个翻页卡封装好当前数字、下一个数字、动片翻转的完整逻辑。这样如果以后想扩展成日期显示（年月日），直接把三组翻页卡各复制一份，改一下格式化逻辑就行，不必重构任何翻页动画代码。

需要模型API调用？免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。

2. 核心细节解析：CSS 3D翻页的原理与关键属性

2.1 单张卡片的结构设计：四层元素缺一不可

先把单个翻页单元的DOM写出来，这是整个项目的地基：

html复制<div class="flip-card" id="hour-tens">
  <div class="flip-card__static flip-card__static--top">
    <span>0</span>
  </div>
  <div class="flip-card__static flip-card__static--bottom">
    <span>1</span>
  </div>
  <div class="flip-card__flip flip-card__flip--top">
    <span>1</span>
  </div>
  <div class="flip-card__flip flip-card__flip--bottom">
    <span>0</span>
  </div>
</div>

这里的关键在于：两个静态片负责平时稳定显示当前数字，两个动片只在翻页瞬间“表演”。静态上半片用overflow:hidden裁掉下半部分，只露出数字的上半截；静态下半片裁掉上半部分，只露出数字的下半截。动片同理，一个负责从水平翻到垂直，一个负责从垂直翻到水平。

很多初学者写翻页效果失败，就是结构少了一层。他们只在静态片之间切换数字，没有加动片，结果翻页瞬间上下两半的数字对不上。记住一个原则：翻页过程中，观众看到的画面永远是“静态片（当前数） + 动片（提前准备好的新/旧数）”的组合。

2.2 transform属性到底在翻转什么

要理解翻页动画，必须把transform-origin和rotateX的组合搞清楚。我用自己的话翻译一遍：

rotateX(θ)表示绕水平轴旋转，正角度是元素顶部朝屏幕外翻，负角度是底部朝屏幕外翻。
transform-origin决定旋转的“铰链”位置。默认是元素正中心，翻页钟必须改：上半动片的原点设在底部，下半动片的原点设在顶部。

举个例子，动片上半部分要实现的动画是从“水平”翻到“几乎垂直”：初始状态rotateX(0deg)，transform-origin: 50% 100%（底部中心），最终状态rotateX(-90deg)。这样它看起来就像一扇门以底边为轴向前倒下。

而整个容器需要设置perspective属性，才能给子元素营造出近大远小的透视感。perspective值我建议放在.flip-card上，取400到600px之间。太小了元素会显得畸变严重，太大了立体感消失，像平面缩放。

2.3 backface-visibility为什么必须加

这个属性是我调试时踩过最经典的坑：不加backface-visibility: hidden的话，当动片旋转超过90度时，浏览器会把元素背面的“镜像内容”渲染出来，这时候观众会看到数字反着、背景颜色也反了，整个画面就像一张被看穿了的纸片。

CSS里元素的背面默认是可见的，这对于做卡片翻转展示（比如双面卡牌游戏）可能是需要的，但翻页钟只需要单面，所以必须强制隐藏背面。加了之后，旋转超过90度的那一面就变成透明，视觉上正好被下面的静态片接住，形成一个连续闭合的动画。

2.4 半片裁剪：overflow hidden加定位的配合

静态片和动片都要限制只能看到数字的某一半。具体的CSS套路是：

卡片整体定宽定高，比如宽120px、高150px。
任意一个半片的绝对定位都是top: 0，left: 0，width: 100%，height: 50%。
上半片的line-height大约是卡片高度，让文字垂直居中偏下，这样数字的视觉中心正好在卡片中线偏下一点，下半片同理。

当上半片设置overflow:hidden，它的可视区域就是卡片的上半部分；当数字在这个区域内水平居中、垂直方向调整到合适的位置，就能保证“上半截数字”正好落在可显示区域内。这个调整没有捷径，就是一个微调用line-height或者translateY。

3. 实操过程：手写一个完整可运行的翻页时钟

3.1 准备工作：项目结构和基础模板

直接新建三个文件：index.html、style.css、script.js。所有代码都写在纯静态文件里，不需要任何构建工具，浏览器直接打开就能跑。这也是这个项目最适合新手练手的原因之一——没有任何环境依赖。

HTML骨架大致是这样：

html复制<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML + CSS + JS 翻页时钟</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="clock">
    <div class="flip-group" data-group="hours">
      <div class="flip-card" data-card="tens"></div>
      <div class="flip-card" data-card="ones"></div>
    </div>
    <div class="clock-colon"><span></span><span></span></div>
    <div class="flip-group" data-group="minutes">
      <div class="flip-card" data-card="tens"></div>
      <div class="flip-card" data-card="ones"></div>
    </div>
    <div class="clock-colon"><span></span><span></span></div>
    <div class="flip-group" data-group="seconds">
      <div class="flip-card" data-card="tens"></div>
      <div class="flip-card" data-card="ones"></div>
    </div>
  </div>
  <script src="script.js"></script>
</body>
</html>

这里我把翻页卡的内容留空，完全由JS动态生成结构。好处是HTML干净，也方便批量创建。如果你想快速看效果，也可以在HTML里直接写死四层结构，但那样每一组卡片都要重复一遍，后续维护麻烦。

3.2 CSS样式：从外框到翻页动画的完整实现

写样式时我习惯从外到内：先搭好时钟整体布局，再写卡片基座，最后处理翻页动画的关键帧。

css复制:root {
  --card-width: 120px;
  --card-height: 150px;
  --card-bg-top: #2a2a2a;
  --card-bg-bottom: #1a1a1a;
  --card-text: #f0f0f0;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #0d0d0d;
  font-family: 'Segoe UI', Arial, sans-serif;
}

.clock {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 40px 50px;
  background: #1c1c1c;
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

这样时钟整体是一个深色圆角面板，三组翻页卡横向排列，冒号分隔。考虑到不同屏幕尺寸，我建议再加上一个wrap和缩放适配，但第一版先把核心效果跑通，别急着优化。

翻页卡基座样式：

css复制.flip-card {
  position: relative;
  width: var(--card-width);
  height: var(--card-height);
  border-radius: 10px;
  perspective: 500px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.flip-card__static,
.flip-card__flip {
  position: absolute;
  left: 0;
  width: 100%;
  height: 50%;
  overflow: hidden;
  background: var(--card-bg-top);
  color: var(--card-text);
}

.flip-card__static--top,
.flip-card__flip--top {
  top: 0;
  border-radius: 10px 10px 0 0;
  line-height: var(--card-height);
}

.flip-card__static--bottom,
.flip-card__flip--bottom {
  top: 50%;
  border-radius: 0 0 10px 10px;
  background: var(--card-bg-bottom);
  line-height: 0;
}

要特别注意line-height的取值。静态上半片里的文字，要让它显示在卡片上半部分的中间偏下，所以line-height设置成完整的卡片高度（150px）。这样span文字会在行框内垂直居中，配合overflow:hidden，观众恰好能看到数字的上半截。静态下半片的line-height设置成0，让文字的基线往上走，让数字在底部半片内尽量靠上——这个具体值跟字体有关，我实测在系统默认字体下line-height: 0效果正好。

数字本身的居中用了flex或者text-align，我习惯在每个半片里加一个span，再对span做水平居中：

css复制.flip-card span {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 64px;
  font-weight: 700;
}

不过这个写法有个细节：对于上半片，span的top是0；对于下半片，span的top是-50%。这样数字在整个卡片里是连续的，但各自被半片裁剪。下面是更精确的写法：

css复制.flip-card__static--top span,
.flip-card__flip--top span {
  top: 0;
}

.flip-card__static--bottom span,
.flip-card__flip--bottom span {
  top: -50%;
  height: 200%;
}

这段逻辑有点绕，简单解释：每个半片的高度只有卡片的一半，内部span要覆盖整个卡片的高度（200%），再把顶部往上偏移一半，这样数字从中间切开后，上半截显示在上半片，下半截显示在下半片。

接下来是动片动画的核心样式。这里我不用keyframes，而是用transition加状态类来控制，因为翻页只需在“翻动瞬间”触发一次，用类切换更简单：

css复制.flip-card__flip {
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: transform 0.3s ease-in-out;
  pointer-events: none;
}

.flip-card__flip--top {
  transform-origin: 50% 100%;
  transform: rotateX(0deg);
}

.flip-card__flip--bottom {
  transform-origin: 50% 0%;
  transform: rotateX(90deg);
}

.flip-card.is-flipping .flip-card__flip--top {
  transform: rotateX(-90deg);
}

.flip-card.is-flipping .flip-card__flip--bottom {
  transform: rotateX(0deg);
}

当JS给卡片加上is-flipping类时，上半动片从0度翻到-90度，下半动片从90度翻到0度，两个动片的动画时长一致、方向互补，视觉上就形成了连贯的翻页。

这里踩过的坑是：过渡动画如果设置成ease，上下动片在中间位置时会速度不一致，看起来有点拧巴。实际体验中ease-in-out最稳，开头和结尾慢、中间快，符合真实机械卡片因为重力加速度产生的运动节奏。

3.3 JS逻辑：时间获取、格式化与翻页触发

JS部分我分三步走：渲染静态数字、每秒校时、触发翻页动画。不要一上来就setInterval，先把每一步拆清楚。

第一步，初始化卡片结构。因为HTML里每个flip-card是空的，我用一个通用函数把四层结构动态创建出来：

javascript复制const CARD_SELECTORS = {
  hours: ['tens', 'ones'],
  minutes: ['tens', 'ones'],
  seconds: ['tens', 'ones']
};

function createFlipCard(cardElement) {
  const topStatic = document.createElement('div');
  topStatic.className = 'flip-card__static flip-card__static--top';
  const topSpan = document.createElement('span');
  topStatic.appendChild(topSpan);

  const bottomStatic = document.createElement('div');
  bottomStatic.className = 'flip-card__static flip-card__static--bottom';
  const bottomSpan = document.createElement('span');
  bottomStatic.appendChild(bottomSpan);

  const topFlip = document.createElement('div');
  topFlip.className = 'flip-card__flip flip-card__flip--top';
  const topFlipSpan = document.createElement('span');
  topFlip.appendChild(topFlipSpan);

  const bottomFlip = document.createElement('div');
  bottomFlip.className = 'flip-card__flip flip-card__flip--bottom';
  const bottomFlipSpan = document.createElement('span');
  bottomFlip.appendChild(bottomFlipSpan);

  cardElement.innerHTML = '';
  cardElement.appendChild(topStatic);
  cardElement.appendChild(bottomStatic);
  cardElement.appendChild(topFlip);
  cardElement.appendChild(bottomFlip);

  return {
    topStaticSpan: topSpan,
    bottomStaticSpan: bottomSpan,
    topFlipSpan: topFlipSpan,
    bottomFlipSpan: bottomFlipSpan,
    currentValue: -1,
    nextValue: -1
  };
}

为什么要缓存span的引用而不是每次都用querySelector？因为翻页动画每秒可能触发至少一次，频繁查找DOM会带来不必要的开销。虽然时钟这种低频率场景问题不大，但养成缓存DOM引用的习惯，对后续做复杂组件很有帮助。

第二步，写时间格式化函数。这里有个经典坑，我们必须把数字补成两位数，比如9点整要显示09:00:00，而不是9:0:0：

javascript复制function padZero(num) {
  return String(num).padStart(2, '0');
}

function getTimeParts(date) {
  return {
    hours: padZero(date.getHours()),
    minutes: padZero(date.getMinutes()),
    seconds: padZero(date.getSeconds())
  };
}

第三步，把时间同步到翻页卡并触发动画。核心逻辑是：如果当前显示的数字和最新时间不一致，就触发翻转；翻转结束后，把静态片更新为最新数字，并移除动画类。

javascript复制function updateFlipCard(cardData, newValue) {
  if (cardData.currentValue === newValue) {
    return;
  }

  if (cardData.currentValue === -1) {
    // 初始化时直接设置数字，不触发翻页
    cardData.topStaticSpan.textContent = newValue;
    cardData.bottomStaticSpan.textContent = newValue;
    cardData.topFlipSpan.textContent = newValue;
    cardData.bottomFlipSpan.textContent = newValue;
    cardData.currentValue = newValue;
    return;
  }

  const flipCard = cardData.cardElement;
  const oldValue = String(cardData.currentValue);
  const nextValue = String(newValue);

  // 动画开始前，动片要先准备好“表演内容”
  cardData.topFlipSpan.textContent = nextValue;
  cardData.bottomFlipSpan.textContent = oldValue;

  // 强制浏览器重新计算样式，确保上一次动画残留状态被清除
  void flipCard.offsetWidth;

  // 触发动画
  flipCard.classList.add('is-flipping');

  // 动画结束后更新静态片，移除动画类
  setTimeout(() => {
    cardData.topStaticSpan.textContent = nextValue;
    cardData.bottomStaticSpan.textContent = nextValue;
    cardData.topFlipSpan.textContent = nextValue;
    cardData.bottomFlipSpan.textContent = nextValue;
    cardData.currentValue = newValue;
    flipCard.classList.remove('is-flipping');
  }, 350);
}

这个函数里有三个不能省的关键点。

一是 void flipCard.offsetWidth 强制重绘。如果不加这一行，当两次翻页间隔极短时，浏览器可能把连续的类添加操作合并，导致第二次动画不触发。这行代码的本质是强迫浏览器在添加类之前完成一次布局计算，把动画状态“复位”。

二是动画结束后必须用setTimeout清理类名。transition动画虽然会自动结束，但如果中途又把is-flipping移除，动片就会瞬间跳回初始位置，造成肉眼可见的闪烁。350ms是我根据CSS里transition: 0.3s加一点冗余留出来的，确保清理发生在动画完全结束后。

三是动片内容的安排：上半动片显示新数字，下半动片显示旧数字。很多教程在这里搞反了，导致动画过程中数字错乱。你可以想象真实翻页钟：前半段观众看到的是新数字从上方盖下来，后半段旧数字从下方翻下去，所以这个分配不能错。

最后是主循环。为了尽量让翻页瞬间和系统秒边界对齐，我用一个校准策略，而不是简单setInterval每秒跑一次：

javascript复制function syncClock() {
  const now = new Date();
  const parts = getTimeParts(now);

  updateFlipCard(cardRegistry.hours.tens, parts.hours[0]);
  updateFlipCard(cardRegistry.hours.ones, parts.hours[1]);
  updateFlipCard(cardRegistry.minutes.tens, parts.minutes[0]);
  updateFlipCard(cardRegistry.minutes.ones, parts.minutes[1]);
  updateFlipCard(cardRegistry.seconds.tens, parts.seconds[0]);
  updateFlipCard(cardRegistry.seconds.ones, parts.seconds[1]);

  // 计算到下一个整秒的毫秒数，校准定时器
  const delay = 1000 - now.getMilliseconds();
  setTimeout(syncClock, delay);
}

function initClock() {
  document.querySelectorAll('.flip-card').forEach((card, index) => {
    const registryKey = Object.keys(CARD_SELECTORS)[Math.floor(index / 2)];
    const pos = index % 2 === 0 ? 'tens' : 'ones';
    // 简化示例：实际需要先建一个映射关系
  });
}

initClock();
syncClock();

实际运行时，setTimeout的delay计算到下一个整秒，能有效避免setInterval因为系统休眠或事件循环阻塞而累积误差。这是翻页时钟“秒表准不准”的关键细节，很多初版实现都忽略了。

3.4 完整代码整合：直接能跑的最小实现

由于上面的代码片段分散在不同章节，我这里整理一份可以直接复制运行的最小完整版，只保留核心翻页逻辑。HTML和CSS尽量精简，JS部分加上了完整的初始化流程。你可以在本地打开运行，然后再按自己的审美改样式。

html复制<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>翻页时钟</title>
<style>
  /* 样式部分详见style.css，我这里只保留最核心的翻页动画 */
  .clock {
    display: flex;
    gap: 16px;
    align-items: center;
    background: #111;
    padding: 30px 40px;
    border-radius: 20px;
  }
  .flip-group {
    display: flex;
    gap: 8px;
  }
  .flip-card {
    position: relative;
    width: 100px;
    height: 130px;
    background: #222;
    border-radius: 8px;
    perspective: 480px;
  }
  .flip-card__static,
  .flip-card__flip {
    position: absolute;
    left: 0;
    width: 100%;
    height: 50%;
    overflow: hidden;
    backface-visibility: hidden;
  }
  .flip-card__static--top,
  .flip-card__flip--top {
    top: 0;
    line-height: 130px;
    border-radius: 8px 8px 0 0;
    background: #2c2c2c;
  }
  .flip-card__static--bottom,
  .flip-card__flip--bottom {
    top: 50%;
    line-height: 0;
    border-radius: 0 0 8px 8px;
    background: #1c1c1c;
  }
  .flip-card span {
    position: absolute;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 56px;
    font-weight: 700;
    color: #eee;
  }
  .flip-card__static--top span,
  .flip-card__flip--top span {
    top: 0;
  }
  .flip-card__static--bottom span,
  .flip-card__flip--bottom span {
    top: -50%;
    height: 200%;
  }
  .flip-card__flip {
    transition: transform 0.3s ease-in-out;
    pointer-events: none;
  }
  .flip-card__flip--top {
    transform-origin: 50% 100%;
    transform: rotateX(0deg);
  }
  .flip-card__flip--bottom {
    transform-origin: 50% 0%;
    transform: rotateX(90deg);
  }
  .flip-card.is-flipping .flip-card__flip--top {
    transform: rotateX(-90deg);
  }
  .flip-card.is-flipping .flip-card__flip--bottom {
    transform: rotateX(0deg);
  }
  .clock-colon {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .clock-colon span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #eee;
  }
</style>
</head>
<body>
  <div class="clock" id="clock">
    <div class="flip-group" data-group="hours">
      <div class="flip-card" data-card="tens"></div>
      <div class="flip-card" data-card="ones"></div>
    </div>
    <div class="clock-colon"><span></span><span></span></div>
    <div class="flip-group" data-group="minutes">
      <div class="flip-card" data-card="tens"></div>
      <div class="flip-card" data-card="ones"></div>
    </div>
    <div class="clock-colon"><span></span><span></span></div>
    <div class="flip-group" data-group="seconds">
      <div class="flip-card" data-card="tens"></div>
      <div class="flip-card" data-card="ones"></div>
    </div>
  </div>
<script>
  function createFlipCard(cardElement) {
    const topStatic = document.createElement('div');
    topStatic.className = 'flip-card__static flip-card__static--top';
    const topSpan = document.createElement('span');
    topStatic.appendChild(topSpan);

    const bottomStatic = document.createElement('div');
    bottomStatic.className = 'flip-card__static flip-card__static--bottom';
    const bottomSpan = document.createElement('span');
    bottomStatic.appendChild(bottomSpan);

    const topFlip = document.createElement('div');
    topFlip.className = 'flip-card__flip flip-card__flip--top';
    const topFlipSpan = document.createElement('span');
    topFlip.appendChild(topFlipSpan);

    const bottomFlip = document.createElement('div');
    bottomFlip.className = 'flip-card__flip flip-card__flip--bottom';
    const bottomFlipSpan = document.createElement('span');
    bottomFlip.appendChild(bottomFlipSpan);

    cardElement.innerHTML = '';
    cardElement.appendChild(topStatic);
    cardElement.appendChild(bottomStatic);
    cardElement.appendChild(topFlip);
    cardElement.appendChild(bottomFlip);

    return {
      cardElement,
      topStaticSpan: topSpan,
      bottomStaticSpan: bottomSpan,
      topFlipSpan: topFlipSpan,
      bottomFlipSpan: bottomFlipSpan,
      currentValue: -1
    };
  }

  function padZero(num) {
    return String(num).padStart(2, '0');
  }

  function initClock() {
    const cardRegistry = [];
    document.querySelectorAll('.flip-card').forEach((card) => {
      cardRegistry.push(createFlipCard(card));
    });
    return cardRegistry;
  }

  function updateFlipCard(cardData, newValue) {
    newValue = String(newValue);
    if (cardData.currentValue === newValue) {
      return;
    }

    if (cardData.currentValue === -1) {
      cardData.topStaticSpan.textContent = newValue;
      cardData.bottomStaticSpan.textContent = newValue;
      cardData.topFlipSpan.textContent = newValue;
      cardData.bottomFlipSpan.textContent = newValue;
      cardData.currentValue = newValue;
      return;
    }

    const oldValue = cardData.currentValue;
    cardData.topFlipSpan.textContent = newValue;
    cardData.bottomFlipSpan.textContent = oldValue;

    void cardData.cardElement.offsetWidth;

    cardData.cardElement.classList.add('is-flipping');

    setTimeout(() => {
      cardData.topStaticSpan.textContent = newValue;
      cardData.bottomStaticSpan.textContent = newValue;
      cardData.topFlipSpan.textContent = newValue;
      cardData.bottomFlipSpan.textContent = newValue;
      cardData.currentValue = newValue;
      cardData.cardElement.classList.remove('is-flipping');
    }, 350);
  }

  function syncClock(cardRegistry) {
    const now = new Date();
    const h = padZero(now.getHours());
    const m = padZero(now.getMinutes());
    const s = padZero(now.getSeconds());

    updateFlipCard(cardRegistry[0], h[0]);
    updateFlipCard(cardRegistry[1], h[1]);
    updateFlipCard(cardRegistry[2], m[0]);
    updateFlipCard(cardRegistry[3], m[1]);
    updateFlipCard(cardRegistry[4], s[0]);
    updateFlipCard(cardRegistry[5], s[1]);

    setTimeout(() => syncClock(cardRegistry), 1000 - now.getMilliseconds());
  }

  const cardRegistry = initClock();
  syncClock(cardRegistry);
</script>
</body>
</html>

这份代码已经去掉了所有非核心注释，打开就能看到翻页效果。如果你想进一步改造，比如加日期、换主题色，从这份基础上改比从头写快得多。

4. 常见问题与排查技巧实录

4.1 初始化时数字直接出现在错误的位置

现象：页面一加载，数字没有居中显示，或者数字被截断、位置偏移特别大。

排查思路：多半是line-height和span定位的配合出了问题。我调试时习惯先给每个半片加上一个临时背景色，看看可视区域到底覆盖了哪些内容。比如把上半片的背景设成红色，下半片设成蓝色，然后观察数字在哪个区域出现，这样能很快定位是top值不对还是line-height不对。

实际我踩过的坑是：在span中同时设置了height: 200%和top: -50%，但忘了给父级半片设置position: relative（或absolute）。span的百分比定位是相对于最近定位祖先计算的，如果父级没有定位，它会往上找到更远的祖先，造成偏移。所以检查一下半片的position是否设置成了absolute或relative。

4.2 翻页动画中途出现“背面透出”或闪烁

现象：动片翻到一半，观众能隐约看到数字的镜像、背景颜色异常，甚至整块卡片一闪而过。

原因：这就是backface-visibility没设置，或者写错了位置。很多教程会建议加在动片上，但要注意，静态片也建议加上，因为静态片理论上也可能在3D空间里被旋转（虽然我们不主动转它，但父容器的preserve-3d有可能让它在某些浏览器渲染路径下露出背面）。

我的建议是直接在.flip-card__static和.flip-card__flip两组元素的公共样式里统一设置backface-visibility: hidden，不要单独只在某个类里写。另外还要确认浏览器是否支持transform-style: preserve-3d，如果该属性被浏览器忽略，整个3D空间会退化成平面，动画看起来就不对。

4.3 连续翻页时第二秒动画不触发

现象：时间从10:00:00变到10:00:01时正常翻页，但从10:00:01变到10:00:02时没反应，数字跳变但无动画。

原因：这就是我前面提到的浏览器动画状态合并问题。当is-flipping类移除和再次添加发生在同一帧内，浏览器会认为状态没有变化，不重新渲染动画。解决办法就是添加类之前执行一次强制重绘。

这里我需要特别强调：不要用void element.offsetWidth以外的其他方式，比如有人喜欢用element.style.transform = ''来重置，但这样会干扰CSS动画的transition，导致效果更加诡异。强制重绘的最小可靠写法就是读取offsetWidth（或者getBoundingClientRect），我实测在Chrome、Firefox、Safari都稳定。

4.4 翻页动画结束后数字出现跳动或残留

现象：动画完成瞬间，静态片的数字已经更新，但动片好像还留在原地，或者显示的还是旧数字，残留了一帧。

原因：setTimeout里的清理代码执行时机和动画实际结束时间不完全一致。如果清理过早，动片会瞬间回到初始状态，被观众看到；如果清理过晚，电脑状态可能一直停留在中间。

我的经验是将setTimeout的时长设置为CSS动画时长的1.1到1.2倍。比如transition时长0.3s，就设到330到350ms。这个冗余能抵消浏览器帧调度带来的微小延迟，基本不会出现残留。如果你的机器特别卡，可以再适当加大，但别超过500ms，否则从翻页结束到静态片更新之间会有明显的停顿感。

4.5 冒号闪烁与整体风格如何搭配

翻页钟的冒号是灵魂。我用了最简单的两个圆点，放在.card-colon容器里，让它们像真实时钟的秒点一样闪烁：每秒切换一次透明度。

css复制.clock-colon span {
  animation: blink 1s infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

这里注意动画时长要和秒切换一致，最好也是1s，并且初始相位从0ms开始，这样第一次闪烁就能和数字翻页联动。如果你不喜欢闪烁，也可以改成静态圆点，看个人审美。

4.6 页面在手机端显示过大或过小

翻页时钟的固定像素尺寸在桌面端没问题，但手机端需要适配。最简单的方式是给整个.clock添加一个transform: scale，根据视口宽度计算缩放比例。但transform会让布局占有率保持不变，所以更好的做法是直接用CSS的clamp函数控制卡片尺寸，或者用vw/vh单位。

我做移动端适配时用的方法比较粗暴：在body里加media query，小于600px宽度时把时钟整体旋转为竖排布局，把翻页卡宽度缩到60px，字号缩到40px。翻页钟本来就是桌面向的组件，手机端能看即可，不需要过度设计。

写在最后的几个实操心得

这个项目看起来简单，但完整做完，你对CSS transform的理解会上一个台阶。我建议你不要只抄代码，而是自己动手改几个参数试试：把transition时长从0.3s改成0.6s看什么效果，把perspective从500px改成100px看透视如何失真，把两个动片的transform-origin互换看会出现什么怪异现象。这种“故意改坏”的过程，往往比照抄更能帮你建立空间感。

还有一点很实用：翻页时钟组件完全可以作为一个通用的“数字滚动器”来用，不只是时钟。比如网站浏览量统计、倒计时活动页、比赛计分牌，都可以复用这套翻页卡结构。你只需要改数据的来源和格式，动画逻辑完全不用动。

调试时记得打开浏览器开发者工具，用“元素”面板直接修改类名和transform值，能实时看到效果，比一遍遍刷新效率高得多。如果动画有问题，优先检查动片的父容器是否设置了perspective，以及是否误加了overflow: hidden把3D变换的景深裁掉了。

这套代码我已经放在本地用了小半年，稳定性没出过问题。如果你在实现过程中遇到任何奇怪的视觉bug，可以按我前面排查思路逐条对照，大概率能定位到原因。翻页时钟的坑就那么几个，踩完就能一次过。

纯CSS实现翻页时钟：3D变换、动画时序与状态管理的完整指南