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

使用 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); /* 翻页效果 */
}

总结

书本翻页效果：通过 rotateY 和 transform-origin 实现。
卡片翻转效果：通过 rotateY 和 backface-visibility 实现。
多页翻页效果：通过多个页面叠加和 rotateY 实现。

这些效果可以用于网页中的交互设计，比如展示图片、卡片或书籍内容。根据需求选择合适的翻页效果！

·······END·······

喜欢的话可以点个赞关注博主哦！！！