使用 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 实现。
这些效果可以用于网页中的交互设计，比如展示图片、卡片或书籍内容。根据需求选择合适的翻页效果！
也许vue+css3做交互特效更简单
关于vue+css3开发的特效，以及和javascript+css3的对比，就说到这里了，希望这三个小实例，能帮到大家了解下应该怎么使用vue+css3开发特效的。
纯 CSS 创作出平滑的层叠海浪特效
这里的波浪只是侧面的，利用几个平面一部分弧旋转得到。定义 dom，容器中包含一行文本和3条做海浪特效的 <span>,设置容器,文字样式,制作海浪动画效果
js实现图片放大镜特效
在平时网上商城购物时，我们能够通过放大镜效果来使我们看图片能够更加的清楚，今天我就来给大家分享一下我学习的放大镜特效
基于 HTML5 Canvas 实现的文字动画特效
文字是网页中最基本的元素，一般我们在网页上都是展示的静态文字，但是就效果来说，还是比较枯燥的。文字淡入淡出的动画效果在项目中非常实用，如果有某些关键的文字，可以通过这种动态的效果来提醒用户阅读
只需三步，实时多边形折射
在本教程中，您将学习如何使用Three.js在三个步骤中使对象看起来像玻璃。渲染3D对象时，无论使用某种3D软件还是使用WebGL进行实时显示，始终都必须为其分配材料以使其可见并具有所需的外观。
纯CSS3仿网易云孤独星球特效
今天收听网易云音乐时看到孤独星球的特效，于是就顺手搬到这里了。孤独星球特效本身没有什么难点，但如果要加入音轨控制星球运动频率就有点麻烦了
原生JS实现旋转木马轮播图特效
当用户点击左右箭头时，让数组进行相应变化（如果点击右箭头，就删除数组最后那个元素，把它添加到最前边；如果点击左箭头，就删除数组最前边那个元素，把它添加到最后边），改变完数组再调用一下move()函数（让图片轮播）
纯css3实现二维码扫描特效
第一步，实现网格背景：第二部实现扫码线以及渐变背景特效，四角特效就是四个宽高相等的正方形，分别设置边框即可。设置扫描动画
canvas+js实现数字雨特效【字符下落特效】
用dropLine这个列表来记录绘制过程，dropLine[i]的意义是表示在第i列，第dropLine[i]行绘制！filltext()是canvas中的方法，这里的三个参数分别对应：内容，横坐标，纵坐标。
纯js时钟特效
电子时钟是网上常见的功能，在学习date对象和定时器功能时，来完成一个电子时钟的制作是不错的选择。学习本教程之前，读者需要具备html和css技能，同时需要有简单的javascript基础。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!