//上下翻页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin:0; padding:0}
body,html{
overflow: hidden;
}
#box{
width:324px;
height:576px;
background-image: url("1.jpg");
background-repeat: no-repeat;
background-size: 100% auto;
position:relative;
}
#box .page{
width: 100%;
height: 50%;
bottom:0;
left:0;
position: absolute;
transform-style: preserve-3d;
transform-origin: center top;
transition:1s all ease;
z-index:2;
transform:perspective(800px) rotateX(0deg);
}
#box .page div{
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
}
#box .page .front{
/*显示图片的右半部分*/
background-image: url("1.jpg");
background-repeat: no-repeat;
background-position: left bottom;
background-size: 100% auto;
/*不显示背面*/
backface-visibility: hidden;
/*层级比背面高*/
z-index:2;
}
#box .page .back{
background-image: url("2.jpg");
background-repeat: no-repeat;
background-position: left top;
background-size: 100% auto;
z-index: 1;
transform: scale(1,-1);
}
#box .page2{
width:100%;
height:50%;
position:absolute;
bottom:0;
left:0;
background-image: url("2.jpg");
background-repeat: no-repeat;
background-position: left bottom;
background-size: 100% auto;
z-index:1;
}
</style>
</head>
<body>
<div id="box">
<div class="page">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="page2"></div>
</div>
</body>
</html>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded',function(){
var oBox = document.getElementById('box');
var oPage = document.querySelector('.page');
var oPage2 = document.querySelector('.page2');
var oFront = document.querySelector('.front');
var oBack = document.querySelector('.back');
var iNow = 1;
var bReady = true;
oBox.onclick = function(){
if(bReady==false) {
return;
}
bReady = false;
iNow++;
oPage.style.transition = '1s all ease';
oPage.style.WebkitTransform = 'perspective(800px) rotateX(180deg)';
};
oPage.addEventListener('transitionend',function(){
//1.瞬间拉回
oPage.style.transition = 'none';
oPage.style.WebkitTransform = 'perspective(800px) rotateY(0deg)';
oBox.style.backgroundImage = 'url("' + iNow + '.jpg")';
oFront.style.backgroundImage = 'url("' + iNow + '.jpg")';
var iNext = iNow+1;
if(iNext > 3){
iNext = 1;
iNow = 0;
}
oBack.style.backgroundImage = 'url("' + iNext + '.jpg")';
oPage2.style.backgroundImage = 'url("' + iNext + '.jpg")';
bReady = true;
},false);
},false);
</script>
//左右翻页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin:0; padding:0}
body,html{
/*防止抖动*/
overflow: hidden;
}
#box{
width:324px;
height:576px;
background-image: url("1.jpg");
background-repeat: no-repeat;
background-size: auto 100%;
position:relative;
}
#box .page{
/*在box的右半部分*/
width: 50%;
height: 100%;
top:0;
right:0;
position: absolute;
/*开启3d模式*/
transform-style: preserve-3d;
/*设定旋转中心*/
transform-origin: left center;
transition:1s all ease;
z-index:2;
/*初始化*/
transform:perspective(800px) rotateX(0deg);
}
#box .page div{
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
}
#box .page .front{
/*显示图片的右半部分*/
background-image: url("1.jpg");
background-repeat: no-repeat;
background-position: right top;
background-size: auto 100%;
/*不显示背面*/
backface-visibility: hidden;
/*层级比背面高*/
z-index:2;
}
#box .page .back{
background-image: url("2.jpg");
background-repeat: no-repeat;
background-position: left top;
background-size: auto 100%;
z-index: 1;
transform: scale(-1,1);
}
#box .page2{
width:50%;
height:100%;
position:absolute;
right:0;
top:0;
background-image: url("2.jpg");
background-repeat: no-repeat;
background-position: right top;
background-size: auto 100%;
z-index:1;
}
</style>
</head>
<body>
<div id="box">
<div class="page">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="page2"></div>
</div>
</body>
</html>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded',function(){
var oBox = document.getElementById('box');
var oPage = document.querySelector('.page');
var oPage2 = document.querySelector('.page2');
var oFront = document.querySelector('.front');
var oBack = document.querySelector('.back');
var iNow = 1;
var bReady = true;
oBox.onclick = function(){
if(bReady==false) {
return;
}
bReady = false;
iNow++;
oPage.style.transition = '1s all ease';
oPage.style.WebkitTransform = 'perspective(800px) rotateY(-180deg)';
};
oPage.addEventListener('transitionend',function(){
//1.瞬间拉回
oPage.style.transition = 'none';
oPage.style.WebkitTransform = 'perspective(800px) rotateY(0deg)';
//2.换图
// oBox.style.background = 'url("'+(iNow%3)+'.jpg") no-repeat';
// oFront.style.background = 'url("'+(iNow%3)+'.jpg") right top no-repeat';
// oBack.style.background = 'url("'+((iNow+1)%3)+'.jpg") left top no-repeat';
// oPage2.style.background = 'url("'+((iNow+1)%3)+'.jpg") right top no-repeat';
oBox.style.backgroundImage = 'url("' + iNow + '.jpg")';
oFront.style.backgroundImage = 'url("' + iNow + '.jpg")';
var iNext = iNow+1;
if(iNext > 3){
iNext = 1;
iNow = 0;
}
oBack.style.backgroundImage = 'url("' + iNext + '.jpg")';
oPage2.style.backgroundImage = 'url("' + iNext + '.jpg")';
bReady = true;
},false);
},false);
</script>