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

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

知知呼呼·2026-08-29·阅读 130 GEO检测（免费）

CSS动画翻页时钟3D变换

|难度：普通|阅读约 56 分钟

做翻页时钟是我去年折腾前端动画时顺手写的一个小项目，本来只是想在桌面上放一个好看的倒计时组件，结果越做越上瘾，把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>
    <d