纯CSS3实现的书本翻页效果DEMO演示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   <title>纯CSS3实现的书本翻页效果DEMO演示</title>
   <style type="text/css">
       body
       {
           padding: 0;
           margin: 0;
       }
       #all
       {
           width: 680px;
           margin-left: auto;
           margin-right: auto;
       }
       #page-flip
       {
           background-image: url(pagebg.jpg);
           position: absolute;
           padding: 40px 40px 40px 340px;
           width: 300px;
           height: 400px;
           overflow: hidden;
       }
       #r1
       {
           position: absolute;
           z-index: 2;
           -webkit-transform-origin: 1315px 500px;
           -webkit-transform: translate(-1030px, -500px) rotate(-32deg);
           -webkit-transition-property: -webkit-transform, -webkit-transform-origin;
           -webkit-transition-duration: 1s;
       }
       #p1
       {
           width: 1285px;
           height: 1388px;
           overflow: hidden;
       }

       #p1 > div
       {
           -webkit-transform-origin: 285px 0;
           -webkit-transform: translate(1030px, 500px) rotate(32deg);
           -webkit-transition-property: -webkit-transform, -webkit-transform-origin;
           -webkit-transition-duration: 1s;
           width: 285px;
           height: 388px;
           background-image: url(pagebg.jpg);
       }
       #p1 > div > div
       {
           width: 10px;
           height: 388px;
           background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .25)), to(rgba(0,0,0,0)));
       }

       #p2 > div
       {
           width: 285px;
           height: 388px;
           -webkit-box-shadow: 0 0 11px rgba(0, 0, 0, .5);
           position: absolute;
           z-index: 1;
           background-image: url(page2.jpg);
       }
       #r3
       {
           -webkit-transform-origin: 1315px 500px;
           -webkit-transform: translate(-1030px, -500px) rotate(-32deg);
           -webkit-transition-property: -webkit-transform, -webkit-transform-origin;
           -webkit-transition-duration: 1s;
           position: absolute;
           z-index: 2;
       }

       #s3
       {
           -webkit-transform-origin: 70px 500px;
           -webkit-transform: translate(215px, -500px) rotate(-32deg) translate(40px, 0);
           -webkit-transition-property: -webkit-transform, -webkit-transform-origin;
           -webkit-transition-duration: 1s;
           position: absolute;
           z-index: 1;
       }
       #page-flip:hover #s3
       {
           -webkit-transform-origin: 325px 500px;
           -webkit-transform: translate(-40px, -500px) rotate(0deg) translate(40px, 0);
       }
       #sp3
       {
           width: 25px;
           height: 1000px;
           background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .25)), to(rgba(0,0,0,0)));
           -webkit-transition-property: width;
           -webkit-transition-duration: 1s;
           overflow: hidden;
       }
       #page-flip:hover #sp3
       {
           width: 11px;
       }
       .s
       {
           width: 285px;
           height: 388px;
           position: absolute;
           overflow: hidden;
           z-index: 3;
       }
       #s2
       {
           -webkit-transform-origin: 45px 500px;
           -webkit-transform: translate(240px, -500px) rotate(-32deg);
           -webkit-transition-property: -webkit-transform, -webkit-transform-origin;
           -webkit-transition-duration: 1s;
           position: absolute;
       }
       #sp2
       {
           width: 15px;
           height: 1000px;
           background: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, .18)), to(rgba(0,0,0,0)));
           overflow: hidden;
       }
       #s4
       {
           opacity: 1;
           -webkit-transition-duration: 0.5s;
       }
       #page-flip:hover #s4
       {
           opacity: 0;
       }
       #page-flip:hover #s2
       {
           -webkit-transform-origin: 300px 500px;
           -webkit-transform: translate(-15px, -500px) rotate(0deg);
       }
       #p3
       {
           width: 1285px;
           height: 1388px;
           overflow: hidden;
       }
       #p3 > div
       {
           -webkit-transform-origin: 0 0;
           -webkit-transform: translate(1255px, 500px) rotate(-32deg);
           -webkit-transition-property: -webkit-transform, -webkit-transform-origin;
           -webkit-transition-duration: 1s;
           -webkit-box-shadow: 0 0 11px rgba(0, 0, 0, .5);
           width: 285px;
           height: 388px;
           background-image: url(page3.jpg);
           overflow: hidden;
       }
       #p3 > div > div
       {
           width: 9px;
           height: 500px;
           float: right;
           background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), to(rgba(0,0,0,.20)));
       }

       #page-flip:hover #r1
       {
           -webkit-transform-origin: 1570px 500px;
           -webkit-transform: translate(-1285px, -500px) rotate(0deg);
       }
       #page-flip:hover #p1 > div
       {
           -webkit-transform-origin: 285px 0;
           -webkit-transform: translate(1285px, 500px) rotate(0deg);
       }
       #page-flip:hover #r3
       {
           -webkit-transform-origin: 1570px 500px;
           -webkit-transform: translate(-1285px, -500px) rotate(0deg);
       }
       #page-flip:hover #p3 > div
       {
           -webkit-transform-origin: 0 0;
           -webkit-transform: translate(1000px, 500px) rotate(0deg);
       }
       a
       {
           display: block;
           position: absolute;
           margin: -20000px 0 0 0;
           padding: 1px;
           z-index: 3;
           -webkit-transition-property: margin;
           -webkit-transition-duration: 0.01s;
       }
       #coke
       {
           width: 253px;
           height: 158px;
       }
       a:hover
       {
           padding: 0;
           border: 1px dotted #92C7C1;
       }
       #page-flip:hover #coke
       {
           -webkit-transition-delay: .8s;
           margin: 33px 0 0 14px;
       }
       #meninas
       {
           width: 253px;
           height: 167px;
       }
       #page-flip:hover #meninas
       {
           -webkit-transition-delay: .8s;
           margin: 203px 0 0 14px;
       }
   </style>
</head>
<body>

   <div id="all">
       <div id="page-flip">
           <div id="r1"><div id="p1"><div><div></div></div></div></div>
           <div id="p2"><div></div></div>
           <div id="r3"><div id="p3"><div><div></div></div></div></div>
           <div class="s"><div id="s3"><div id="sp3"></div></div></div>
           <div class="s" id="s4"><div id="s2"><div id="sp2"></div></div></div>
           <a id="coke" href="#" title="Pure CSS Coke Can"></a>
           <a id="meninas" href="#" title="CSS 3D Meninas"></a>
       </div>
   </div>
</body>

</html>

代码中的图片：

1、背景（pagebg.jpg）