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

发布于:2025-05-10 ⋅ 阅读:(14) ⋅ 点赞:(0)

 

使用 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·······

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


网站公告

今日签到

点亮在社区的每一天
去签到