CSS3 effect of book-flipping

Powerful CSS3 do not need to be explained, code layering understands "direct copy", very interesting.

：

<ul class= "Align" ><li><figure class= ' book ' ><!--Front--><ul class= ' Hardcover_front ' > <li><div class= "Coverdesign yellow" ><span class= "Ribbon" >new</span>
　　
*, *:after, *:before {-webkit-box-sizing:border-box;-moz-box-sizing:border-box; box-sizing:border-box;} * {  margin:0;  Padding:0;}::before,::after {content: "";}
　　
html,body {height:100%;-webkit-font-smoothing:subpixel-antialiased;} HTML {font-size:100%;} Body {background: #ecf0f1; color: #34495e; font-family: ' Lato ', ' Arial ', sans-serif;font-weight:400;line-height:1.2;} UL {Margin:0;padding:0;list-style:none;} A {color: #2c3e50; text-decoration:none;}
　　
/* This is the book download button style */.btn {display:inline-block;text-transform:uppercase;border:2px solid #2c3e50; margin-top:100px; Font-size:0.7em;font-weight:700;padding:0.1em 0.4em;text-align:center;-webkit-transition:color 0.3s, Border-color 0.3s;-moz-transition:color 0.3s, Border-color 0.3s;transition:color 0.3s, Border-color 0.3s;}. Btn:hover {border-color: #16a085; color: #16a085;}
　　
/* Book basic style */.align {clear:both;margin:90px auto 20px;width:100%;max-width:1170px;text-align:center;}. Align > li {width:500px;min-height:300px;display:inline-block;margin:30px 20px 30px 30px;padding:0 0 0 60px;vertic Al-align:top;}
　　
. book {position:relative;width:160px;height:220px;-webkit-perspective:1000px;-moz-perspective:1000px; Perspective:1000px;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style: Preserve-3d;}
　　
/* For each page of processing */.hardcover_front li:first-child {background-color: #eee;-webkit-backface-visibility:hidden;- Moz-backface-visibility:hidden;backface-visibility:hidden;}. Hardcover_front li:last-child {background: #fffbec;}. Hardcover_back li:first-child {background: #fffbec;}. Hardcover_back li:last-child {background: #fffbec;}. Book_spine li:first-child {background: #eee;}. Book_spine li:last-child {background: #333;}
　　
. Hardcover_front Li:first-child:after,.hardcover_front Li:first-child:before,.hardcover_front Li:last-child:after ,. Hardcover_front li:last-child:before,.hardcover_back li:first-child:after,.hardcover_back Li:first-child:before ,. Hardcover_back li:last-child:after,.hardcover_back li:last-child:before,.book_spine Li:first-child:after,.book_ Spine Li:first-child:before,.book_spine li:last-child:after,.book_spine Li:last-child:before {background: #999;}
　　
/* Official style of pagination */.page > li {background:-webkit-linear-gradient (left, #e1ddd8 0, #fffbf6 100%); background:-moz-linear-g Radient (left, #e1ddd8 0, #fffbf6 100%) Background:-ms-linear-gradient (left, #e1ddd8 0, #fffbf6 100%); background: Linear-gradient (left, #e1ddd8 0, #fffbf6 100%), Box-shadow:inset 0px-1px 2px rgba (, 0.1), inset-1px 0px 1px r GBA (0.2), border-radius:0px 5px 5px 0px; /*. Open cover, back, and page */.hardcover_front {-webkit-transform:rotatey ( -34deg) Translatez (8px);-moz-transform:rotatey ( -34DEG) Translatez (8px); Transform:rotatey ( -34deg) Translatez (8px); z-index:100;}. Hardcover_back {-webkit-transform:rotatey ( -15deg) Translatez ( -8px);-moz-transform:rotatey ( -15deg) TranslateZ ( -8px ); Transform:rotatey ( -15deg) Translatez ( -8px);}. Page Li:nth-child (1) {-webkit-transform:rotatey ( -28deg);-moz-transform:rotatey ( -28deg); Transform:rotatey ( -28DEG) ;}. Page Li:nth-child (2) {-webkit-transform:rotatey ( -30deg);-moz-transform:rotatey ( -30deg); Transform:rotatey ( -30deg);}. Page Li:nth-child (3) {-webkit-transform:rotatey ( -32deg);-moz-transform:rotatey ( -32deg); Transform:rotatey ( -32DEG) ;}. Page Li:nth-child (4) {-webkit-transform:rotatey ( -34deg);-moz-transform:rotatey ( -34deg); Transform:rotatey ( -34DEG) ;}. Page Li:nth-child (5) {-webkit-transform:rotatey ( -36deg);-moz-transform:rotatey ( -36deg); Transform:rotatey ( -36DEG) ;}
 
 
/*. Position, conversion and change */.hardcover_front,.hardcover_back,.book_spine,.hardcover_front Li,.hardcover_back li,.book_spine Li {position:absolute;top:0;left:0;width:100%;height:100%;- Webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d;}. Hardcover_front,.hardcover_back {-webkit-transform-origin:0% 100%;-moz-transform-origin:0% 100%;transform-origin: 0% 100%;}.  Hardcover_front {-webkit-transition:all 0.8s ease, z-index 0.6s;-moz-transition:all 0.8s Ease, Z-index 0.6s;transition: All 0.8s ease, Z-index 0.6s;}. Hardcover_front Li:first-child {cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;- Webkit-transform:translatez (2px);-moz-transform:translatez (2px); Transform:translatez (2px);}. Hardcover_front li:last-child {-webkit-transform:rotatey (180deg) Translatez (2px);-moz-transform:rotatey (180DEG) Translatez (2px); Transform:rotatey (180deg) Translatez (2px);} 
　　
. hardcover_back Li:first-child {-webkit-transform:translatez (2px);-moz-transform:translatez (2px); Transform: Translatez (2px);}. Hardcover_back li:last-child {-webkit-transform:translatez ( -2px);-moz-transform:translatez ( -2px); Transform: Translatez ( -2px);} /* Hierarchical design */.hardcover_front Li:first-child:after,.hardcover_front li:first-child:before,.hardcover_front li: Last-child:after,.hardcover_front Li:last-child:before,.hardcover_back li:first-child:after,.hardcover_back Li: First-child:before,.hardcover_back Li:last-child:after,.hardcover_back li:last-child:before,.book_spine Li: First-child:after,.book_spine li:first-child:before,.book_spine li:last-child:after,.book_spine Li:last-child: before {position:absolute;top:0;left:0;}
　　
. Hardcover_front Li:first-child:after,.hardcover_front Li:first-child:before {width:4px;height:100%;}. Hardcover_front li:first-child:after {-webkit-transform:rotatey (90deg) Translatez ( -2px) TranslateX (2px);- Moz-transform:rotatey (90deg) Translatez ( -2px) TranslateX (2px); Transform:rotatey (90deg) Translatez ( -2px) TranslateX (2px);}. Hardcover_front Li:first-child:before {-webkit-transform:rotatey (90deg) Translatez (158px) TranslateX (2px); Moz-transform:rotatey (90deg) Translatez (158px) TranslateX (2px), Transform:rotatey (90deg) Translatez (158px) TranslateX (2px);}. Hardcover_front Li:last-child:after,.hardcover_front li:last-child:before {width:4px;height:160px;}. Hardcover_front li:last-child:after {-webkit-transform:rotatex (90deg) Rotatez (90deg) Translatez (80px) TranslateX (- 2px) Translatey ( -78px),-moz-transform:rotatex (90deg) Rotatez (90deg) Translatez (80px) TranslateX ( -2px) Translatey (- 78px) Transform:rotatex (90deg) Rotatez (90deg) Translatez (80px) TranslateX ( -2px) Translatey ( -78px);}. hardcover_front Li:last-child:before {box-shadow:0px 0px 30px 5px #333;-webkit-transform:rotatex (90deg) Rotatez ( 90DEG) Translatez ( -140px) TranslateX ( -2px) Translatey ( -78px)-moz-transform:rotatex (90deg) Rotatez (90deg) Translatez ( -140px) TranslateX ( -2px) Translatey ( -78px) Transform:rotatex (90deg) Rotatez (90deg) Translatez ( -140px) TranslateX ( -2px) Translatey ( -78px);}
 
 
. hardcover_back li:first-child:after,.hardcover_back Li:first-child:before {width:4px;height:100%;}. Hardcover_back li:first-child:after {-webkit-transform:rotatey (90deg) Translatez ( -2px) TranslateX (2px);- Moz-transform:rotatey (90deg) Translatez ( -2px) TranslateX (2px); Transform:rotatey (90deg) Translatez ( -2px) TranslateX (2px);}. Hardcover_back Li:first-child:before {-webkit-transform:rotatey (90deg) Translatez (158px) TranslateX (2px); Moz-transform:rotatey (90deg) Translatez (158px) TranslateX (2px), Transform:rotatey (90deg) Translatez (158px) TranslateX (2px);}. Hardcover_back li:last-child:after,.hardcover_back li:last-child:before {width:4px;height:160px;}. Hardcover_back li:last-child:after {-webkit-transform:rotatex (90deg) Rotatez (90deg) Translatez (80px) TranslateX (2px ) Translatey ( -78px),-moz-transform:rotatex (90deg) Rotatez (90deg) Translatez (80px) TranslateX (2px) Translatey ( -78px) ; Transform:rotatex (90deg) Rotatez (90deg) Translatez (80px) TranslateX (2px) Translatey ( -78px);}. Hardcover_back Li:last-child:before {box-shadow:10px-1px 80px 20px #666;-webkit-transform:rotatex (90deg) Rotatez (90deg) Translatez ( -140px) TranslateX (2px) Translatey ( -78px);-moz-transform:rotatex (90deg) Rotatez (90deg) Translatez (- 140px) TranslateX (2px) Translatey ( -78px) Transform:rotatex (90deg) Rotatez (90deg) Translatez ( -140px) TranslateX (2px) Translatey ( -78px);}
　　
. book_spine {-webkit-transform:rotatey (60deg) TranslateX ( -5px) Translatez ( -12px);-moz-transform:rotatey (60DEG) TranslateX ( -5px) Translatez ( -12px) Transform:rotatey (60deg) TranslateX ( -5px) Translatez ( -12px); width:16px;z-index : 0;}. Book_spine li:first-child {-webkit-transform:translatez (2px);-moz-transform:translatez (2px); Transform:translatez (2px);}. Book_spine li:last-child {-webkit-transform:translatez ( -2px);-moz-transform:translatez ( -2px); Transform: Translatez ( -2px);}
　　
. book_spine li:first-child:after,.book_spine Li:first-child:before {width:4px;height:100%;}. Book_spine li:first-child:after {-webkit-transform:rotatey (90deg) Translatez ( -2px) TranslateX (2px);-moz-transform: Rotatey (90deg) Translatez ( -2px) TranslateX (2px); Transform:rotatey (90deg) Translatez ( -2px) TranslateX (2px);}. Book_spine Li:first-child:before {-webkit-transform:rotatey ( -90deg) Translatez ( -12px);-moz-transform:rotatey (- 90DEG) Translatez ( -12px); Transform:rotatey ( -90deg) Translatez ( -12px);}. Book_spine li:last-child:after,.book_spine li:last-child:before {width:4px;height:16px;}. Book_spine li:last-child:after {-webkit-transform:rotatex (90deg) Rotatez (90deg) Translatez (8px) TranslateX (2px) Translatey ( -6px);-moz-transform:rotatex (90deg) Rotatez (90deg) Translatez (8px) TranslateX (2px) Translatey ( -6PX); Transform:rotatex (90deg) Rotatez (90deg) Translatez (8px) TranslateX (2px) Translatey ( -6px);}. Book_spine Li:last-child:before {box-shadow:5px-1px 100px 40px rgba (0, 0, 0, 0.2);-webkIt-transform:rotatex (90deg) Rotatez (90deg) Translatez ( -210px) TranslateX (2px) Translatey ( -6px);-moz-transform: Rotatex (90deg) Rotatez (90deg) Translatez ( -210px) TranslateX (2px) Translatey ( -6px); Transform:rotatex (90deg) Rotatez ( 90DEG) Translatez ( -210px) TranslateX (2px) Translatey ( -6px);}. Page,.page > li {position:absolute;top:0;left:0;-webkit-transform-style:preserve-3d;-moz-transform-style: Preserve-3d;transform-style:preserve-3d;}. page {width:100%;height:98%;top:1%;left:3%;z-index:10;}. Page > li {width:100%;height:100%;-webkit-transform-origin:left center;-moz-transform-origin:left center; Transform-origin:left Center;-webkit-transition-property:transform;-moz-transition-property:transform; Transition-property:transform;-webkit-transition-timing-function:ease;-moz-transition-timing-function:ease; Transition-timing-function:ease;}. Page > Li:nth-child (1) {-webkit-transition-duration:0.6s;-moz-transition-duration:0.6s;transition-duration: 0.6s;}. Page > Li: Nth-child (2) {-webkit-transition-duration:0.6s;-moz-transition-duration:0.6s;transition-duration:0.6s;}. Page > Li:nth-child (3) {-webkit-transition-duration:0.4s;-moz-transition-duration:0.4s;transition-duration: 0.4s;}. Page > Li:nth-child (4) {-webkit-transition-duration:0.5s;-moz-transition-duration:0.5s;transition-duration: 0.5s;}. Page > Li:nth-child (5) {-webkit-transition-duration:0.6s;-moz-transition-duration:0.6s;transition-duration: 0.6s;}
 
 
. book:hover >. hardcover_front {-webkit-transform:rotatey ( -145deg) translatez (0);-moz-transform:rotatey ( -145deg ) Translatez (0); Transform:rotatey ( -145deg) translatez (0); z-index:0;}. Book:hover >. Page li:nth-child (1) {-webkit-transform:rotatey ( -30deg);-moz-transform:rotatey ( -30deg); Transform: Rotatey ( -30deg);-webkit-transition-duration:1.5s;-moz-transition-duration:1.5s;transition-duration:1.5s;}. Book:hover >. Page li:nth-child (2) {-webkit-transform:rotatey ( -35deg);-moz-transform:rotatey ( -35deg); Transform: Rotatey ( -35deg);-webkit-transition-duration:1.8s;-moz-transition-duration:1.8s;transition-duration:1.8s;}. Book:hover > Page Li:nth-child (3) {-webkit-transform:rotatey ( -118deg);-moz-transform:rotatey ( -118deg); Transform:rotatey ( -118deg);-webkit-transition-duration:1.6s;-moz-transition-duration:1.6s;transition-duration: 1.6s;}. Book:hover > Page Li:nth-child (4) {-webkit-transform:rotatey ( -130deg);-moz-transform:rotatey ( -130deg); Transform:rotatey ( -130deg);-webkit-transition-duration:1.4s;-moz-transition-duration:1.4s;transition-duration:1.4s;}. Book:hover > Page Li:nth-child (5) {-webkit-transform:rotatey ( -140deg);-moz-transform:rotatey ( -140deg); Transform:rotatey ( -140deg);-webkit-transition-duration:1.2s;-moz-transition-duration:1.2s;transition-duration: 1.2s;}
 
 
. coverdesign {position:absolute;top:0;left:0;bottom:0;right:0;overflow:hidden;z-index:1;- Webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;backface-visibility:hidden;}. Coverdesign::after {background-image:-webkit-linear-gradient ( -135deg, Rgba (255, 255, 255, 0.45) 0, transparent 100%); Background-image:-moz-linear-gradient ( -135deg, Rgba (255, 255, 255, 0.45) 0, Transparent 100%); Background-image: Linear-gradient ( -135deg, Rgba (255, 255, 255, 0.45) 0, transparent 100%);p Osition:absolute;top:0;left:0;bottom:0;righ t:0;}. Coverdesign H1 {color: #fff; font-size:2.2em;letter-spacing:0.05em;text-align:center;margin:54% 0 0 0;text-shadow: -1p x-1px 0 Rgba (0,0,0,0.1);}. Coverdesign p {color: #f8f8f8; Font-size:1em;text-align:center;text-shadow: -1px-1px 0 rgba (0,0,0,0.1);}. Yellow {background-color: #f1c40f; Background-image:-webkit-linear-gradient (Top, #f1c40f 58%, #e7ba07 0%); Background-image:-moz-linear-gradient (Top, #f1c40f 58%, #e7ba07 0); background-iMage:linear-gradient (Top, #f1c40f 58%, #e7ba07 0%);}. Blue {background-color: #3498db; Background-image:-webkit-linear-gradient (Top, #3498db 58%, #2a90d4 0%); Background-image:-moz-linear-gradient (Top, #3498db 58%, #2a90d4 0); Background-image:linear-gradient (top, #3498db 58 %, #2a90d4 0%);}. Grey {background-color: #f8e9d1; Background-image:-webkit-linear-gradient (Top, #f8e9d1 58%, #e7d5b7 0%); Background-image:-moz-linear-gradient (Top, #f8e9d1 58%, #e7d5b7 0); Background-image:linear-gradient (top, #f8e9d1 58 %, #e7d5b7 0%);}
　　
. Ribbon {background: #c0392b; color: #fff;d isplay:block;font-size:0.7em;position:absolute;top:11px;right:1px;width : 40px;height:20px;line-height:20px;letter-spacing:0.15em;text-align:center;-webkit-transform:rotatez (45DEG) Translatez (1px),-moz-transform:rotatez (45deg) Translatez (1px), Transform:rotatez (45deg) Translatez (1px); Webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;backface-visibility:hidden;z-index:10;}. Ribbon::before,.ribbon::after{position:absolute;top: -20px;width:0;height:0;border-bottom:20px solid #c0392b; border-top:20px solid Transparent;}. Ribbon::before{left: -20px;border-left:20px solid Transparent;}. Ribbon::after{right: -20px;border-right:20px solid Transparent;}
　　
figcaption {padding-left:40px;text-align:left;position:absolute;top:0%;left:160px;width:310px;- Webkit-backface-visibility:hidden;} Figcaption h1 {margin:0;} Figcaption span {color: #16a085;p adding:0.6em 0 1em 0;display:block;} Figcaption p {color: #63707d; line-height:1.3;}
　　
@media screen and (max-width:37.8125em) {. align > li {width:100%;min-height:440px;height:auto;padding:0;margin:0 0 30px 0;}. Book {margin:0 auto;} figcaption {text-align:center;width:320px;top:250px;padding-left:0;left: -80px;font-size:90%;}}
Finally, it's a responsive ...
CSS3 effect of book-flipping