🚀纯CSS实现3D翻书特效！无JavaScript也能玩出花
想要实现翻书效果，但不想写JavaScript？那你一定不能错过这个纯CSS打造的3D翻页特效！不仅炫酷，还能让你对 CSS 3D 有更深刻的理解！
🌟 效果亮点
- 逼真3D翻页：页面翻动就像真实的纸质书一样顺滑自然。
- 完全纯CSS实现：不依赖 JavaScript，性能出众、逻辑简单。
- 优秀交互体验：通过点击实现翻页，简单直观。
💡 技术揭秘
这个酷炫效果的核心依赖于 CSS 的几个高级特性：
| 技术 | 说明 |
|---|---|
transform-style: preserve-3d | 创建真正的 3D 空间 |
perspective | 设置视觉透视深度 |
rotateY | 控制页面绕Y轴翻转 |
transition | 实现平滑翻转动画 |
:checked 伪类 | 利用隐藏单选按钮实现翻页状态控制 |
这意味着：只要 HTML + CSS，就能实现真正意义上的 3D 翻书效果！
📦 完整源码
下面是一个可以直接复制使用的完整HTML页面：
📁 无依赖，一张 HTML 文件即可跑起来！
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>纯CSS 3D翻书特效</title>
<style>
:root {
--body-bg: #FAFAFA;
--page-bg: #F5F5F5;
--dark-text: #2A2935;
--baseline: 10px;
--title: "Cormorant Garamond", serif;
--base-size: calc(var(--baseline) * 1.2);
}
* {
box-sizing: border-box;
}
body {
background-color: var(--body-bg);
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.cover {
width: calc(var(--baseline) * 60);
height: calc(var(--baseline) * 42.6);
box-shadow: 0 0 100px rgba(0, 0, 0, 0.3);
}
.book {
width: 100%;
height: 100%;
display: flex;
perspective: 1200px;
}
.book__page {
position: relative;
width: 50%;
height: 100%;
display: grid;
transform: rotateY(0deg);
transition: transform 0.9s cubic-bezier(0.645, 0.045, 0.355, 1);
transform-origin: 0% 0%;
background-color: var(--page-bg);
background-image: linear-gradient(90deg, rgb(227, 227, 227) 0%, rgba(247, 247, 247, 0) 18%);
}
.book__page:nth-of-type(1) {
background-image: linear-gradient(-90deg, rgb(227, 227, 227) 0%, rgba(247, 247, 247, 0) 18%);
}
.book__page img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.book__page--1 {
cursor: pointer;
overflow: hidden;
}
.book__page--1 img {
width: 100%;
height: auto;
}
.book__page--2 {
position: absolute;
right: 0;
pointer-events: none;
transform-style: preserve-3d;
background-color: var(--page-bg);
}
.book__page--4 {
cursor: pointer;
padding: 0 calc(var(--baseline) * 3);
}
.book__page-front,
.book__page-back {
position: absolute;
width: 100%;
height: 100%;
}
.book__page-front {
transform: rotateY(0deg) translateZ(1px);
}
.book__page-back {
padding: 0 calc(var(--baseline) * 1.8);
transform: rotateY(180deg) translateZ(1px);
}
.book__page .page__content {
padding: var(--baseline);
height: 100%;
text-align: center;
overflow: hidden;
padding-bottom: calc(var(--baseline) * 2.5);
}
.page__number {
position: absolute;
bottom: var(--baseline);
width: calc(100% - var(--baseline) * 2);
font-family: var(--title);
font-size: calc(var(--base-size) * 0.67);
text-align: center;
}
.book input[type=radio] {
display: none;
}
.book input[type=radio]:checked + .book__page {
transform: rotateY(-180deg);
}
</style>
</head>
<body>
<div class="cover">
<div class="book">
<!-- 封面页 -->
<label for="page-1" class="book__page book__page--1">
<img src="https://pic4.zhimg.com/100/v2-9954c8b4d3a25100ec107aff1c1c7737_r.jpg" alt="封面图片">
</label>
<!-- 第四页 -->
<label for="page-2" class="book__page book__page--4">
<div class="page__content">
<img src="https://picx.zhimg.com/100/v2-a5cbc5244d3c660093390b26c7f4a8c7_r.jpg" alt="内容图片">
<div class="page__number">3</div>
</div>
</label>
<!-- 控制按钮 -->
<input type="radio" name="page" id="page-1" />
<input type="radio" name="page" id="page-2" />
<!-- 第二页（翻转页） -->
<label class="book__page book__page--2">
<div class="book__page-front">
<div class="page__content">
<img src="https://picx.zhimg.com/v2-faaaa787399a99d96953af8b6e578b2a_r.jpg" alt="正面图片">
<div class="page__number">1</div>
</div>
</div>
<div class="book__page-back">
<div class="page__content">
<img src="https://pic1.zhimg.com/100/v2-2c46c59eb7aecf6618b52b0ac86e98a4_r.jpg" alt="背面图片">
<div class="page__number">2</div>
</div>
</div>
</label>
</div>
</div>
</body>
</html>
🔚 总结
虽然这个小项目可能不会直接应用于正式产品中，但它是一个非常适合练习 CSS3 变换与 3D 动画的案例。通过它你可以：
- 掌握
perspective和transform-style的用法 - 利用
:checked实现无 JS 状态切换 - 制作视觉吸引力强的交互动效
喜欢的话不妨点个赞或收藏，也欢迎动手尝试更复杂的翻页逻辑！😉
📎 衍生玩法建议
- 加入更多页，实现完整书本
- 页面内添加文字内容
- 自动翻页动画（可配合 JS 后续扩展）