纯CSS实现的3D翻页效果
来源：互联网 发布：最新pp2000软件下载 编辑：程序博客网 时间：2024/06/02 20:55
CSS实现的3D翻页效果 我是三页翻页。
CSS代码如下：
* { padding: 0; margin: 0;}body, html { height: 100%;}body { /*perspective 属性指定了观察者与z=0平面的距离，使具有三维位置变换的元素产生透视效果。z>0的三维元素比正常大，而z<0时则比正常小， 大小程度由该属性的值决定。默认情况下，消失点位于元素的中心，但是可以通过设置perspective-origin属性来改变其位置。*/ -webkit-perspective: 1000px; -moz-perspective: 1000px; -ms-perspective: 1000px; perspective: 1000px; background-color: #212121; font-family: '微软雅黑';}.book { position: absolute; top: 50%; left: 50%; margin-top: -300px; width: 400px; height: 550px; background-color: #fff; -webkit-transform: rotateX(30deg); -ms-transform: rotateX(30deg); -o-transform: rotateX(30deg); transform: rotateX(30deg);}.preserve-3d { /*transform-style属性指定了，该元素的子元素是（看起来）位于三维空间内, 还是在该元素所在的平面内被扁平化。*/ -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; /*规定如何在 3D 空间中呈现被嵌套的元素*/ transform-style: preserve-3d;}.book-page { position: absolute; top: 0; left: 0; width: 400px; height: 550px; /*设置四个边框的样式*/ border: 1px solid papayawhip; text-align: center;}.book-page-box { -webkit-transform-origin: 0 50%; -moz-transform-origin: 0 50%; -ms-transform-origin: 0 50%; -o-transform-origin: 0 50%; /*设置旋转元素的基点位置*/ transform-origin: 0 50%; -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); /*旋转DIV元素*/ transform: rotateY(0deg);}@keyframes flipBook1 { 0% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } 50% { -webkit-transform: rotateY(-160deg); -ms-transform: rotateY(-160deg); -o-transform: rotateY(-160deg); transform: rotateY(-160deg); } 100% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); }}/* Firefox */@-moz-keyframes flipBook1 { 0% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } 50% { -webkit-transform: rotateY(-160deg); -ms-transform: rotateY(-160deg); -o-transform: rotateY(-160deg); transform: rotateY(-160deg); } 100% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); }}/* Safari and Chrome */@-webkit-keyframes flipBook1 { 0% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } 50% { -webkit-transform: rotateY(-160deg); -ms-transform: rotateY(-160deg); -o-transform: rotateY(-160deg); transform: rotateY(-160deg); } 100% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); }}/* Opera */@-o-keyframes flipBook1 { 0% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } 50% { -webkit-transform: rotateY(-160deg); -ms-transform: rotateY(-160deg); -o-transform: rotateY(-160deg); transform: rotateY(-160deg); } 100% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); }}@keyframes flipBook2 { 0% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } 50% { -webkit-transform: rotateY(-150deg); -ms-transform: rotateY(-150deg); -o-transform: rotateY(-150deg); transform: rotateY(-150deg); } 100% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); }}/* Firefox */@-moz-keyframes flipBook2 { 0% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } 50% { -webkit-transform: rotateY(-150deg); -ms-transform: rotateY(-150deg); -o-transform: rotateY(-150deg); transform: rotateY(-150deg); } 100% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); }}/* Safari and Chrome */@-webkit-keyframes flipBook2 { 0% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } 50% { -webkit-transform: rotateY(-150deg); -ms-transform: rotateY(-150deg); -o-transform: rotateY(-150deg); transform: rotateY(-150deg); } 100% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); }}/* Opera */@-o-keyframes flipBook2 { 0% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } 50% { -webkit-transform: rotateY(-150deg); -ms-transform: rotateY(-150deg); -o-transform: rotateY(-150deg); transform: rotateY(-150deg); } 100% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); }}@keyframes flipBook3 { 0% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } 50% { -webkit-transform: rotateY(-140deg); -ms-transform: rotateY(-140deg); -o-transform: rotateY(-140deg); transform: rotateY(-140deg); } 100% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); }}/* Firefox */@-moz-keyframes flipBook3 { 0% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } 50% { -webkit-transform: rotateY(-140deg); -ms-transform: rotateY(-140deg); -o-transform: rotateY(-140deg); transform: rotateY(-140deg); } 100% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); }}/* Safari and Chrome */@-webkit-keyframes flipBook3 { 0% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } 50% { -webkit-transform: rotateY(-140deg); -ms-transform: rotateY(-140deg); -o-transform: rotateY(-140deg); transform: rotateY(-140deg); } 100% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); }}/* Opera */@-o-keyframes flipBook3 { 0% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } 50% { -webkit-transform: rotateY(-140deg); -ms-transform: rotateY(-140deg); -o-transform: rotateY(-140deg); transform: rotateY(-140deg); } 100% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); }}/*书的封面*/.book-page-1 .page-front { background-color: cornflowerblue;}.book-page-1 .page-back { background-color: #fff;}.book-page-1 .page-front p { font-size: 40px; color: #fff; margin-top: 100px; font-family: 华文琥珀; vertical-align:middle; text-align: center;}.flip-animation-1 { /*把 "flipBook" 动画捆绑到 div 元素，时长：17 秒*/ animation: flipBook1 17s; -moz-animation: flipBook1 17s; /* Firefox */ -webkit-animation: flipBook1 17s; /* Safari and Chrome */ -o-animation: flipBook1 17s; /* Opera */}/*书的第二页*/.book-page-2 .page-back, .book-page-2 .page-front { background-color: #fff;}.book-page-2 .page-front p { font-size: 25px; color: #1976D2; font-family: 华文楷体; margin-top: 100px; writing-mode:tb-rl;}.flip-animation-2 { /*把 "flipBook2" 动画捆绑到 div 元素，时长：13 秒,延长2秒*/ animation: flipBook2 13s 2s; -moz-animation: flipBook2 13s 2s; /* Firefox */ -webkit-animation: flipBook2 13s 2s; /* Safari and Chrome */ -o-animation: flipBook2 13s 2s; /* Opera */}/*书的第三页*/.book-page-3 .page-back, .book-page-3 .page-front { background-color: #fff;}.book-page-3 .page-front p { font-size: 30px; color: #1976D2; margin-top: 100px; font-family: 华文楷体;}.flip-animation-3 { animation: flipBook3 10s 3s; -moz-animation: flipBook3 10s 3s; /* Firefox */ -webkit-animation: flipBook3 10s 3s; /* Safari and Chrome */ -o-animation: flipBook3 10s 3s; /* Opera */}/*书的第四页*/.book-page-4 .page-front p { font-size: 30px; color: #1976D2; margin-top: 50px; writing-mode:tb-rl; font-family: 华文楷体;}html代码
<!-- 代码部分begin --> <!-- 书的主体 --> <div class="book preserve-3d"> <!-- 书的最后一页 --> <div class="book-page-box book-page-4 preserve-3d"> <div class="book-page page-front"> <p>平生不会相思，才会相思，便害相思，身似浮云，心如飞絮，气若游丝；空一缕余香再此 盼千金游子何之，症候来时，正是何时，灯半昏时，月半明时。 <br/> <br/> <br/> </p> </div> </div> <!-- 书的第三页 --> <div class="book-page-box book-page-3 preserve-3d flip-animation-3"> <div class="book-page page-front"> <p><br/>文字部分<br/> 文字部分<br/> <br/> 文字部分。 <br/> 世不相忘。<br/> <br/> 文字部分 <br/> 文字部分 </p> </div> </div> <!-- 书的第二页 --> <div class="book-page-box book-page-2 preserve-3d flip-animation-2"> <div class="book-page page-front"> <p>文字部分</p> </div> </div> <!-- 书的封面 --> <div class="book-page-box book-page-1 preserve-3d flip-animation-1"> <div class="book-page page-front"> <p> <br/> <br/> <br/> <br/> 文字部分 <br> 文字部分 </p> </div> </div> </div>
注释里面都有解释。
阅读全文
0 0
- 纯CSS实现的3D翻页效果
- 纯CSS实现翻页效果
- 纯CSS实现点击滚动翻页的效果
- 纯CSS实现3D折纸效果
- 纯CSS实现3D翻牌效果
- 纯CSS实现的3D倒计时效果
- 【转】纯CSS实现3D效果的按钮
- 纯CSS代码实现翻页焦点图效果
- 纯CSS实现图像3D悬停效果
- 纯CSS实现易拉罐3D滚动效果
- CCActionPageTurn3D（可以实现翻页的3d效果）
- 用纯CSS写的图片切换,翻页效果..
- 纯css写的仿真图书翻页效果
- 纯CSS代码实现翻页
- 纯CSS代码实现翻页
- android实现3D效果翻页
- 纯CSS3实现的书本翻页效果DEMO演示
- 纯CSS实现的3D简洁按钮设计
- 算法-->shell排序
- CorelDRAW X8 64位官方中文版下载
- 单片机入门——数码管动态显示
- ios原生项目集成react-native过程记录
- 添加指定图书
- 纯CSS实现的3D翻页效果
- 程序员如何优雅的挣零花钱？
- linux下使用systemctl管理tomcat开机自启动
- 最小生成树（prime算法、kruskal算法） 和 最短路径算法（floyd、dijkstra）
- JS原生实现多个小球碰撞反弹
- Capturing Wireless LAN Packets in Monitor Mode with iw
- linux的文件搜索命令
- leetcode之Game of Life 问题
- GridView中的bit类型如何进行判断的方法
