一直想做一个翻页的效果，在网上找了很多资料，最好的个人觉得当属turn.js,但是它需要收费，果断放弃，然后又发现这个，感觉不错，仔细分析代码，开始的时候真心有点搞不懂，再三慢慢琢磨后，终于有了一点领悟，，给代码写了一点注释（表达能力欠缺啊，望见谅）。。。。
这个程序的不足有很多，我打算在接下来的几天进行修改一下，不足的点有：
1 兼容性不好，显而易见啊。
2 稳定性不好，多测试一下就发现当鼠标移到书本上的时候，第一面有明显的抖动。。。。
3 翻页的时候不够流畅，而且翻页这一过程速度太快，不能用鼠标来控制翻页这一动作，这一点在看过turn.js做的就会有所感受。
4 阴影部分做得不够细，翻页这一过程中的页面阴影不是很明显。。。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 3 3 <head> 4 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 5 5 <title>纯CSS3实现的书本翻页效果</title> 6 6 <style type="text/css"> 7 7 body 8 8 { 9 9 padding: 0; 10 10 margin: 0; 11 11 } 12 12 #all 13 13 { 14 14 width: 680px; 15 15 margin-left: auto; 16 16 margin-right: auto; 17 17 } 18 18 #page-flip 19 19 { 20 20 background-image: url(pagebg.jpg); 21 21 position: absolute; 22 22 padding: 40px 40px 40px 340px; /*卡着了图片在底板上的大致位置*/ 23 23 width: 300px; 24 24 height: 400px; 25 25 26 26 } 27 27 #r1 28 28 { 29 29 position: absolute; 30 30 z-index: 2; 31 31 -webkit-transform-origin: 1315px 500px; 32 32 -webkit-transform: translate(-1030px, -500px)rotate(-32deg); 33 33 -webkit-transition-property: -webkit-transform, -webkit-transform-origin; 34 34 -webkit-transition-duration: 1s; 35 35 } 36 36 #p1 /*设置了一个一开始就斜起来的大框架*/ 37 37 { 38 38 width: 1285px; 39 39 height: 1388px; 40 40 overflow: hidden; /*这个非常关键，它决定了page1图片能否跟着#p1的运动而运动*/ 41 41 42 42 } 43 43 44 44 #p1 > div /* 设置，让书本回归到正向位置，不然会像#p1一样斜着*/ 45 45 { 46 46 -webkit-transform-origin: 285px 0; 47 47 -webkit-transform: translate(1030px, 500px) rotate(32deg); 48 48 -webkit-transition-property: -webkit-transform, -webkit-transform-origin; 49 49 -webkit-transition-duration: 1s; 50 50 width: 285px; 51 51 height: 388px; 52 52 background-image: url(page1.jpg); 53 53 } 54 54 #p1 > div > div /* 设置书轴的阴影效果*/ 55 55 { 56 56 width: 10px; 57 57 height: 388px; 58 58 background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .25)), to(rgba(0,0,0,0))); 59 59 } 60 60 61 61 #p2 > div /* 设置第三面的图片*/ 62 62 { 63 63 width: 285px; 64 64 height: 388px; 65 65 -webkit-box-shadow: 0 0 11px rgba(0, 0, 0, .5); 66 66 position: absolute; 67 67 z-index: 1; 68 68 background-image: url(page2.jpg); 69 69 } 70 70 #r3 /* 和r1一样的设置*/ 71 71 { 72 72 -webkit-transform-origin: 1315px 500px; 73 73 -webkit-transform: translate(-1030px, -500px) rotate(-32deg); 74 74 -webkit-transition-property: -webkit-transform, -webkit-transform-origin; 75 75 -webkit-transition-duration: 1s; 76 76 position: absolute; 77 77 z-index: 2; 78 78 } 79 79 80 80 #p3 /* 和p1一样的，设置了一个一开始就斜起来的大框架*/ 81 81 { 82 82 width: 1285px; 83 83 height: 1388px; 84 84 overflow: hidden; 85 85 } 86 86 #p3 > div /* 设置第二面的运动轨迹，第二面的开始位置为斜着，它随着#p3的运动而归正，斜着的时候有一个小角露在外面，这个小角实际上是第二面的，但是看上去像第一面折起来*/ 87 87 { 88 88 -webkit-transform-origin: 0 0; 89 89 -webkit-transform: translate(1255px, 500px) rotate(-32deg); 90 90 -webkit-transition-property: -webkit-transform, -webkit-transform-origin; 91 91 -webkit-transition-duration: 1s; 92 92 -webkit-box-shadow: 0 0 11px rgba(0, 0, 0, .5); 93 93 width: 285px; 94 94 height: 388px; 95 95 background-image: url(page3.jpg); 96 96 overflow: hidden; 97 97 } 98 98 #p3 > div > div /* 设置书本翻页之后的第二面与第三面衔接地方的阴影效果，也就是翻页之后第二面看起来有点供起来的效果*/ 99 99 { 100 100 width: 9px; 101 101 height: 500px; 102 102 float: right; 103 103 background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), to(rgba(0,0,0,.20))); 104 104 } 105 105 106 106 .s /* 设置与书本一样大小的透明框架*/ 107 107 { 108 108 width: 285px; 109 109 height: 388px; 110 110 position: absolute; 111 111 overflow: hidden; 112 112 z-index: 3; 113 113 } 114 114 115 115 #s3 116 116 { 117 117 -webkit-transform-origin: 70px 500px; 118 118 -webkit-transform: translate(215px, -500px) rotate(-32deg) translate(40px, 0); 119 119 -webkit-transition-property: -webkit-transform, -webkit-transform-origin; 120 120 -webkit-transition-duration: 1s; 121 121 position: absolute; 122 122 z-index: 1; 123 123 } 124 124 #page-flip:hover #s3 125 125 { 126 126 -webkit-transform-origin: 325px 500px; 127 127 -webkit-transform: translate(-40px, -500px) rotate(0deg) translate(40px, 0); 128 128 } 129 129 #sp3 /*设置第一面的三角页角的运动的轨迹*/ 130 130 { 131 131 width: 25px; 132 132 height: 1000px; 133 133 background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .25)), to(rgba(0,0,0,0))); 134 134 -webkit-transition-property: width; 135 135 -webkit-transition-duration: 1s; 136 136 overflow: hidden; 137 137 } 138 138 #page-flip:hover #sp3 139 139 { 140 140 width: 11px; 141 141 } 142 142 143 143 #s4 /*设置第一面的三角页角起来的时候那一瞬间的阴影效果*/ 144 144 { 145 145 opacity: 1; 146 146 -webkit-transition-duration: 0.5s; 147 147 } 148 148 #page-flip:hover #s4 149 149 { 150 150 opacity: 0; 151 151 } 152 152 153 153 #s2 154 154 { 155 155 -webkit-transform-origin: 45px 500px; 156 156 -webkit-transform: translate(240px, -500px) rotate(-32deg); 157 157 -webkit-transition-property: -webkit-transform, -webkit-transform-origin; 158 158 -webkit-transition-duration: 1s; 159 159 position: absolute; 160 160 } 161 161 #sp2 162 162 { 163 163 width: 15px; 164 164 height: 1000px; 165 165 background: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, .18)), to(rgba(0,0,0,0))); 166 166 overflow: hidden; 167 167 } 168 168 169 169 #page-flip:hover #s2 170 170 { 171 171 -webkit-transform-origin: 300px 500px; 172 172 -webkit-transform: translate(-15px, -500px) rotate(0deg); 173 173 } 174 174 175 175 176 176 #page-flip:hover #r1 177 177 { 178 178 -webkit-transform-origin: 1570px 500px; 179 179 -webkit-transform: translate(-1285px, -500px) rotate(0deg); 180 180 } 181 181 #page-flip:hover #p1 > div 182 182 { 183 183 -webkit-transform-origin: 285px 0; 184 184 -webkit-transform: translate(1285px, 500px) rotate(0deg); 185 185 } 186 186 #page-flip:hover #r3 187 187 { 188 188 -webkit-transform-origin: 1570px 500px; 189 189 -webkit-transform: translate(-1285px, -500px) rotate(0deg); 190 190 } 191 191 #page-flip:hover #p3 > div 192 192 { 193 193 -webkit-transform-origin: 0 0; 194 194 -webkit-transform: translate(1000px, 500px) rotate(0deg); 195 195 } 196 196 197 206 198 211 199 231 </style> 200 232 </head> 201 233 <body> 202 234 203 235 204 236 </div> 205 237 206 238 <div id="all"> 207 239 <div id="page-flip"> 208 240 <div id="r1"><div id="p1"><div><div></div></div></div></div> 209 241 <div id="p2"><div></div></div> 210 242 <div id="r3"><div id="p3"><div><div></div></div></div></div> 211 243 <div class="s"><div id="s3"><div id="sp3"></div></div></div> 212 244 <div class="s" id="s4"><div id="s2"><div id="sp2"></div></div></div> 213 245 214 246 </div> 215 247 </div> 216 248 </body> 217 249 </html>
原文：http://www.cnblogs.com/melissa/p/4987219.html