CSS3 制作的书本翻页特效css3实现书本翻页效果的示例代码css3鼠标悬停图片3D翻页显示文字描述特效纯CSS3实现杂志翻页动画特效纯CSS3实现的书籍自动翻页动画效果源码js+css3实现的翻页动画效果数字时钟源码纯css3实现的书本翻页动画特效源码CSS3实现的答题卡翻页切换特效源码jQuery和CSS3实现弹性过渡全屏翻页特效源码jQuery+CSS3实现的全屏垂直翻页特效源码一款很酷的CSS3翻页时钟动画特效源码

CSS 3D Bending Effect - Page Flip

 /* remember to use - transform-style: preserve-3d; */ html,body { height:100%; overflow: hidden; } body { background: radial-gradient(#E4CEA6, #9C8763); perspective: 900px; margin: 0; } #flip { animation: wrapper 6s ease-in-out infinite; height: 350px; width: 253px; position: absolute; left: 50%; top: 30%; transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg) rotateY(0deg)!important; transform-style: preserve-3d; transform-origin: 0 0 0; } @keyframes wrapper { 50% { transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg) rotateY(-180deg); } } #flip div { height: 350px; width: 24px; position: absolute; left: calc(100% - 1px); transform-origin: 0 100%; transform-style: preserve-3d; background-size: 253px 350px; } #flip #front, #flip #front div { background-image: url(http://blogs.slj.com/afuse8production/files/2012/06/Hobbit1.jpg); box-shadow: inset rgba(255,255,255,0.3) 0px -1px 0 0,#35582C 0px 1px 0px 0px; } #flip #front > div > div > div > div > div > div > div > div > div > div { box-shadow: inset rgba(255,255,255,0.3) -1px -1px 0 0, #35582C 1px 1px 0px 0px; } #flip #back { transform: rotateY(.4deg); transform-origin: -100% 0; } /* avoid pages overlap */ #flip #back, #flip #back div { background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/164210/map1_.jpg); } #flip > div { left: 0; background-position-x: 0; } #flip div > div { background-position-x: -23px; animation: page 6s ease-in-out infinite; } #flip div > div > div { background-position-x : -46px; } #flip div > div > div > div { background-position-x : -69px; } #flip div > div > div > div > div { background-position-x : -92px; } #flip div > div > div > div > div > div { background-position-x : -115px; } #flip div > div > div > div > div > div > div { background-position-x : -138px; } #flip div > div > div > div > div > div > div > div { background-position-x : -161px; } #flip div > div > div > div > div > div > div > div > div { background-position-x : -184px; } #flip div > div > div > div > div > div > div > div > div > div { background-position-x : -207px; } #flip div > div > div > div > div > div > div > div > div > div > div { background-position-x : -229px; } /* the more pieces you have, the smoother the bend is */ @keyframes page { 15% { transform: rotateY(-10deg); } 50% { transform: rotateY(-2deg); } 65% { transform: rotateY(10deg); } 100% { transform: rotateY(0deg); } } #book { width: 248px; height: 350px; position: absolute; left:50%; top: 30%; transform: translate3d(0px,0px,-10px) rotateX(60deg) rotateZ(29deg); transform-style: preserve-3d; -webkit-transform-origin: 0 0 0; } @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 { animation: book 6s ease-in-out infinite; background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/164210/map2.jpg); 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; transform: translateZ(-40px); left: 0; top: 0; } #book #shadow { 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; transform: translateZ(-40px); } @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; transform: rotateX(-90deg); 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; transform: rotateY(90deg); 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; transform: translate3d(20px,350px,-16px); transform-style: preserve-3d; } #bookmark div { background: rgb(151, 88, 88); box-shadow: rgb(133,77,77) 1px 0; height: 10px; width: 20px; position: absolute; top: 9px; transform: rotateX(-14deg); transform-origin: 50% 0; transform-style: preserve-3d; } #bookmark > div > div { background: linear-gradient(top, rgb(151, 88, 88), rgb(189, 123, 123), rgb(151, 88, 88)); } #bookmark > div > div > div { background: linear-gradient(top,rgb(151, 88, 88),rgb(133, 77, 77)); } #bookmark > div > div > div > div { 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: linear-gradient(top,rgba(83, 53, 13, 0.25),rgba(83, 53, 13, 0.11)); height: 15px; width: 20px; position: absolute; transform: translate3d(12px,350px,-25px) rotateX(-90deg) skewX(20deg); transform-origin: 0 0; }