这次给大家带来使用CSS做出3D翻页效果，使用CSS做出3D翻页效果的注意事项有哪些，下面就是实战案例，一起来看一下。
今天开始～小编将与大家分享一系列的web前端特效荟萃，喜欢把玩儿炫酷效果的小伙伴快快看过来^_^ ，希望大家喜欢呦～
第一期，给大家分享一个使用纯CSS实现书籍3D翻页效果， 相关CSS代码如下：
cloth html,body { height:100%; overflow: hidden;}body { background: -webkit-radial-gradient(#E4CEA6, #9C8763); background: radial-gradient(#E4CEA6, #9C8763); -webkit-perspective: 900px; perspective: 900px; margin: 0;}#flip { -webkit-animation: wrapper 6s ease-in-out infinite; animation: wrapper 6s ease-in-out infinite; height: 350px; width: 253px; position: absolute; left: 50%; top: 30%; -webkit-transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg)!important; transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg)!important; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: 0 0 0; transform-origin: 0 0 0;}@-webkit-keyframes wrapper { 50% { -webkit-transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg) rotateY(180deg); transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg) rotateY(180deg); }}@keyframes wrapper { 50% { -webkit-transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg) rotateY(180deg); transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg) rotateY(180deg); }}#flip p { height: 350px; width: 24px; position: absolute; left: calc(100% - 1px); -webkit-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; background-size: 253px 350px;}#flip #front, #flip #front p { background-image: url(http://img.hoop8.com/attachments/1512/846611208706.png); box-shadow: inset rgba(255,255,255,0.3) 0px -1px 0 0,#35582C 0px 1px 0px 0px;}#flip #front > p > p > p > p > p > p > p > p > p > p { box-shadow: inset rgba(255,255,255,0.3) -1px -1px 0 0, #35582C 1px 1px 0px 0px;}#flip #back { -webkit-transform: rotateY(.2deg); transform: rotateY(.2deg); } /* avoid pages overlap */#flip #back,#flip #back p { background-image: url(http://img.hoop8.com/attachments/1512/846611208706.png); }#flip > p { left: 0; background-position-x: 0; }#flip p > p { background-position-x: -23px; -webkit-animation: page 6s ease-in-out infinite; animation: page 6s ease-in-out infinite; }#flip p > p > p { background-position-x : -46px; } #flip p > p > p > p { background-position-x : -69px; }#flip p > p > p > p > p { background-position-x : -92px; }#flip p > p > p > p > p > p { background-position-x : -115px; }#flip p > p > p > p > p > p > p { background-position-x : -138px; }#flip p > p > p > p > p > p > p > p { background-position-x : -161px; }#flip p > p > p > p > p > p > p > p > p { background-position-x : -184px; }#flip p > p > p > p > p > p > p > p > p > p { background-position-x : -207px; }#flip p > p > p > p > p > p > p > p > p > p > p { background-position-x : -229px; }/* the more pieces you have, the smoother the bend is */@-webkit-keyframes page { 15% { -webkit-transform: rotateY(-10deg); transform: rotateY(-10deg); } 50% { -webkit-transform: rotateY(-2deg); transform: rotateY(-2deg); } 65% { -webkit-transform: rotateY(10deg); transform: rotateY(10deg); } 100% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); }}@keyframes page { 15% { -webkit-transform: rotateY(-10deg); transform: rotateY(-10deg); } 50% { -webkit-transform: rotateY(-2deg); transform: rotateY(-2deg); } 65% { -webkit-transform: rotateY(10deg); transform: rotateY(10deg); } 100% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); }}#book { width: 248px; height: 350px; position: absolute; left:50%; top: 30%; -webkit-transform: translate3d(0px,0px,-10px) rotateX(60deg) rotateZ(29deg); transform: translate3d(0px,0px,-10px) rotateX(60deg) rotateZ(29deg); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: 0 0 0;}@-webkit-keyframes book { 25% { box-shadow: inset rgba(0,0,0,.2) 0px 0 50px -140px; } 50% { box-shadow: inset rgba(0,0,0,.2) 0px 0 50px -140px; } 100% { box-shadow: inset rgba(0,0,0,.2) 510px 0 50px -140px; }}@keyframes book { 25% { box-shadow: inset rgba(0,0,0,.2) 0px 0 50px -140px; } 50% { box-shadow: inset rgba(0,0,0,.2) 0px 0 50px -140px; } 100% { box-shadow: inset rgba(0,0,0,.2) 510px 0 50px -140px; }}#book #top { -webkit-animation: book 6s ease-in-out infinite; animation: book 6s ease-in-out infinite; background: url(http://img.hoop8.com/attachments/1512/900611208706.png); background-size: 100% 100%; background-position: 100%; box-shadow: inset rgba(0,0,0,0.2) 510px 0 50px -140px; height: 350px; width: 248px; position: absolute; left: 0; top: 0;}#book #bottom { background: #E7DED1; box-shadow: rgba(83, 53, 13, 0.2) 4px 2px 1px, #35582C 1px 1px 0px 0px; height: 350px; width: 253px; position: absolute; -webkit-transform: translateZ(-40px); transform: translateZ(-40px); left: 0; top: 0;}#book #shadow { -webkit-animation: shadow 6s ease-in-out infinite; animation: shadow 6s ease-in-out infinite; box-shadow: inset rgba(83, 53, 13, 0) -200px 0 150px -140px; height: 350px; width: 248px; position: absolute; left: -100%; top: 0; -webkit-transform: translateZ(-40px); transform: translateZ(-40px);}@-webkit-keyframes shadow { 20% { box-shadow: inset rgba(83, 53, 13, 0) -200px 0 150px -140px; } 50% { box-shadow: inset rgba(83, 53, 13, 0.3) -350px 0 150px -140px; } 60% { box-shadow: inset rgba(83, 53, 13, 0) -200px 0 150px -140px; }}@keyframes shadow { 20% { box-shadow: inset rgba(83, 53, 13, 0) -200px 0 150px -140px; } 50% { box-shadow: inset rgba(83, 53, 13, 0.3) -350px 0 150px -140px; } 60% { box-shadow: inset rgba(83, 53, 13, 0) -200px 0 150px -140px; }}#book #front { background: -webkit-linear-gradient(top,#FCF6EA, #D8D1C3); background-size: 100% 2px; box-shadow: inset #C2BBA2 3px 0 0px, #35582C -2px 1px 0px 0px; height: 40px; width: 251px; left: -3px; position: absolute; bottom: -40px; -webkit-transform: rotateX(-90deg); transform: rotateX(-90deg); -webkit-transform-origin: 50% 0; transform-origin: 50% 0; border-top-left-radius: 5px; border-bottom-left-radius: 5px;}#book #right { background: -webkit-linear-gradient(left,#DDD2BB, #BDB3A0); background-size: 2px 100%; box-shadow: inset rgba(0,0,0,0) 0 0 0 20px; height: 100%; width: 40px; position: absolute; right: -40px; top: 0; -webkit-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-transform-origin: 0 50%; transform-origin: 0 50%;}h4 { position: absolute; bottom: 20px; left: 20px; margin: 0; font-weight: 200; opacity: 1; font-family: sans-serif; color: rgba(0,0,0,0.3); }/* bookmark */#bookmark { position: absolute; -webkit-transform: translate3d(20px,350px,-16px); transform: translate3d(20px,350px,-16px); -webkit-transform-style: preserve-3d; transform-style: preserve-3d;}#bookmark p { background: rgb(151, 88, 88); box-shadow: rgb(133,77,77) 1px 0; height: 10px; width: 20px; position: absolute; top: 9px; -webkit-transform: rotateX(-14deg); transform: rotateX(-14deg); -webkit-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transform-style: preserve-3d; transform-style: preserve-3d;}#bookmark > p > p { background: -webkit-linear-gradient(top, rgb(151, 88, 88), rgb(189, 123, 123), rgb(151, 88, 88)); background: linear-gradient(top, rgb(151, 88, 88), rgb(189, 123, 123), rgb(151, 88, 88));}#bookmark > p > p > p { background: -webkit-linear-gradient(top,rgb(151, 88, 88),rgb(133, 77, 77)); background: linear-gradient(top,rgb(151, 88, 88),rgb(133, 77, 77));}#bookmark > p > p > p > p { background: none; border-top: 0px solid transparent; border-right: 10px solid rgb(133, 77, 77); border-bottom: 10px solid transparent; border-left: 10px solid rgb(133, 77, 77); height: 0; width: 0;}#bookmark-shadow { background: -webkit-linear-gradient(top,rgba(83, 53, 13, 0.25),rgba(83, 53, 13, 0.11)); background: linear-gradient(top,rgba(83, 53, 13, 0.25),rgba(83, 53, 13, 0.11)); height: 15px; width: 20px; position: absolute; -webkit-transform: translate3d(12px,350px,-25px) rotateX(-90deg) skewX(20deg); transform: translate3d(12px,350px,-25px) rotateX(-90deg) skewX(20deg); -webkit-transform-origin: 0 0; transform-origin: 0 0;}
CSS实现3D翻书效果
相信看了本文案例你已经掌握了方法，更多精彩请关注创想鸟其它相关文章！
推荐阅读：
立即学习“前端免费学习笔记（深入）”；
H5中APP监听返回事件处理
h5实现多图片预览上传及点击可拖拽控件
以上就是使用CSS做出3D翻页效果的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1609138.html
微信扫一扫 
支付宝扫一扫 
