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;
}