Maison > Article > interface Web > CSS pur pour réaliser l'effet de rotation de page 3D des livres
Cet article présente principalement des informations pertinentes sur des exemples d'utilisation de CSS pur pour obtenir l'effet de rotation de page 3D des livres. L'éditeur pense que c'est assez bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.
À partir d'aujourd'hui~ L'éditeur partagera avec vous une série d'effets spéciaux front-end Web. Amis qui aiment jouer avec des effets sympas, jetez un œil ^_^ J'espère que vous l'aimerez ~
Dans le premier numéro, j'aimerais partager avec vous comment utiliser du CSS pur pour réaliser l'effet de rotation de page 3D des livres. Le code CSS pertinent est le suivant :<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>cloth</title> <style> 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; } </style> </head> <body> <p id='book'> <p id='top'></p> <p id='front'></p> <p id='right'></p> <p id='bottom'></p> <p id='shadow'></p> <p id='bookmark'> <p> <p> <p> <p></p> </p> </p> </p> </p> <p id='bookmark-shadow'></p> </p> <p id='flip'> <p id='front'> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p></p> </p> </p> </p> </p> </p> </p> </p> </p> </p> </p> <p id='back'> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p></p> </p> </p> </p> </p> </p> </p> </p> </p> </p> </p> </p> <h4>CSS实现3D翻书效果</h4> </body> </html>
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!