設(shè)定翻頁轉(zhuǎn)軸transform-origin: left center;左邊中心；
設(shè)定頁面翻頁層級：page頁面和front頁面z-index:2;其余z-index:1;
注意每次填圖片前先清運(yùn)動(dòng)效果，使其頁面front等先返回原位置。
翻頁方法：
前頁： backface-visibility:hidden;
z-index:2;
后頁：transform:scale(-1,1);
z-index:1;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
*{margin:0;padding:0;}
html,body{overflow:hidden;}
#box{
background:url("img/0.jpg")no-repeat;
width:700px;
height:400px;
margin:100px auto;
position:relative;
}
#box .page{
width:50%;
height:100%;
top:0;
right:0;
position:absolute;
transform-style:preserve-3d;
transform-origin: left center;
transition:1s all ease;
z-index:2;
transform:perspective(800px) rotateY(0deg);
}
.page div{
width:100%;
height:100%;
left:0;
top:0;
}
.page .front{
background:url("img/0.jpg")right top no-repeat;
position:absolute;
backface-visibility:hidden;
z-index:2;
}
.page .back{
background:url("img/1.jpg") left top no-repeat;
position:absolute;
transform:scale(-1,1);
z-index:1;
}
#box .page2{
width:50%;
height:100%;
top:0;
right:0;
position:absolute;
background:url("img/1.jpg") right top;
z-index:1;
}
</style>
<body>
<div id="box">
<div class="page">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="page2"></div>
</div>
</body>
</html>
<script>
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=0;
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(){
oPage.style.transition='none';
oPage.style.WebkitTransform='perspective(800px) rotateY(0deg)';
oBox.style.background='url("img/'+(iNow%3)+'.jpg")no-repeat';
oFront.style.background='url("img/'+(iNow%3)+'.jpg")right top no-repeat';
oBack.style.background='url("img/'+((iNow+1)%3)+'.jpg")left top no-repeat';
oPage2.style.background='url("img/'+((iNow+1)%3)+'.jpg")right top no-repeat';
bReady=true;
},false);
},false);
</script>
