Html
    Css
    Js

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

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

书本翻页效果

0