css实现翻页效果图怎么做？

摘要：使用 CSS 可以实现多种翻页效果，比如书本翻页、卡片翻转等。以下是两种常见的翻页效果实现：通过 transform 和 rotateY 实现 3D 翻页效果。这些效果可以用于网页中的交互设计，比如展示图片、卡片或书籍内容。根据需求选择合适的翻页效果！

使用 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 实现。

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

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_12723