css实现翻页效果图怎么做？
使用 css 可以实现多种翻页效果，比如书本翻页、卡片翻转等。以下是两种常见的翻页效果实现：
效果 1：书本翻页效果
通过 transform 和 rotateY 实现 3D 翻页效果。
html 结构
<div class="book">
<div class="page page1">第一页</div>
<div class="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: 0 4px 8px rgba(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 结构
<div class="card">
<div class="card-front">正面</div>
<div class="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: 0 4px 8px rgba(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 结构
<div class="flip-book">
<div class="page page1">第一页</div>
<div class="page page2">第二页</div>
<div class="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: 0 4px 8px rgba(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 实现。
这些效果可以用于网页中的交互设计，比如展示图片、卡片或书籍内容。根据需求选择合适的翻页效果！
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
