css3 翻书效果
1
3
2
4
5
样式
#all { width: 680px; margin-left: auto; margin-right: auto; } #page-flip { position: relative; 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: url(http://images.cnblogs.com/cnblogs_com/iphone6s/765364/o_1.jpg) no-repeat; background-size: 100% 100%; } #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: url(http://images.cnblogs.com/cnblogs_com/iphone6s/765364/o_2.jpg) no-repeat; background-size: 100% 100%; } #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: url(http://images.cnblogs.com/cnblogs_com/iphone6s/765364/o_4.jpg) no-repeat; background-size: 100% 100%; 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); }
HTML DOM
<div id="all"> <div id="page-flip"> <div id="r1"><div id="p1"><div><div>1</div></div></div></div> <div id="p2"><div>3</div></div> <div id="r3"><div id="p3"><div><div>2</div></div></div></div> <div class="s"><div id="s3"><div id="sp3">4</div></div></div> <div class="s" id="s4"><div id="s2"><div id="sp2">5</div></div></div> </div> </div>