当前位置：首页 > ops >正文

【前端分享】CSS实现3种翻页效果类型，附源码！

ops 2025/9/3 22:37:42

使用 css 可以实现多种翻页效果，比如书本翻页、卡片翻转等。以下是两种常见的翻页效果实现：

效果 1：书本翻页效果

通过 transform 和 rotateY 实现 3D 翻页效果。

html 结构

<divclass="book">
<divclass="page page1">第一页</div>
<divclass="page page2">第二页</div>
</div>

CSS 样式

body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
perspective: 1000px; /* 3D 透视效果 */
}.book {
width: 200px;
height: 300px;
position: relative;
transform-style: preserve-3d; /* 保持 3D 效果 */
}.page {
position: absolute;
width: 100%;
height: 100%;
background-color: white;
border: 1px solid #ccc;
box-shadow: 04px8pxrgba(0, 0, 0, 0.2);
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
backface-visibility: hidden; /* 隐藏背面 */
transition: transform 1s ease-in-out;
}.page1 {
transform-origin: left;
}.page2 {
transform-origin: right;
transform: rotateY(180deg); /* 初始状态为背面 */
}.book:hover.page1 {
transform: rotateY(-180deg); /* 翻页效果 */
}.book:hover.page2 {
transform: rotateY(0deg); /* 翻页效果 */
}

效果 2：卡片翻转效果

通过 transform 和 rotateY 实现卡片翻转效果。

HTML 结构

<divclass="card">
<divclass="card-front">正面</div>
<divclass="card-back">背面</div>
</div>

CSS 样式

body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
perspective: 1000px; /* 3D 透视效果 */
}.card {
width: 200px;
height: 300px;
position: relative;
transform-style: preserve-3d; /* 保持 3D 效果 */
transition: transform 1s ease-in-out;
}.card-front,
.card-back {
position: absolute;
width: 100%;
height: 100%;
background-color: white;
border: 1px solid #ccc;
box-shadow: 04px8pxrgba(0, 0, 0, 0.2);
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
backface-visibility: hidden; /* 隐藏背面 */
}.card-front {
background-color: #ffcc00;
}.card-back {
background-color: #00ccff;
transform: rotateY(180deg); /* 初始状态为背面 */
}.card:hover {
transform: rotateY(180deg); /* 翻转效果 */
}

效果 3：多页翻页效果

通过多个页面叠加实现多页翻页效果。

HTML 结构

<divclass="flip-book">
<divclass="page page1">第一页</div>
<divclass="page page2">第二页</div>
<divclass="page page3">第三页</div>
</div>

CSS 样式

body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
perspective: 1000px; /* 3D 透视效果 */
}.flip-book {
width: 200px;
height: 300px;
position: relative;
transform-style: preserve-3d; /* 保持 3D 效果 */
}.page {
position: absolute;
width: 100%;
height: 100%;
background-color: white;
border: 1px solid #ccc;
box-shadow: 04px8pxrgba(0, 0, 0, 0.2);
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
backface-visibility: hidden; /* 隐藏背面 */
transition: transform 1s ease-in-out;
}.page1 {
transform-origin: left;
}.page2 {
transform-origin: left;
transform: rotateY(-180deg); /* 初始状态为背面 */
}.page3 {
transform-origin: left;
transform: rotateY(-180deg); /* 初始状态为背面 */
}.flip-book:hover.page1 {
transform: rotateY(-180deg); /* 翻页效果 */
}.flip-book:hover.page2 {
transform: rotateY(0deg); /* 翻页效果 */
}.flip-book:hover.page3 {
transform: rotateY(0deg); /* 翻页效果 */
}