body { padding:0; margin:0; } #all { width:680px; margin-left:auto; margin-right:auto; } #page-flip { 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(http://www.jq22.com/img/cs/300x500-1.png); } #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(http://www.jq22.com/img/cs/300x500-2.png); } #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(http://www.jq22.com/img/cs/300x500-3.png); 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; }