3D翻页.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>李立昌 http://www.jianshu.com/users/b1e8423ae7e2/latest_articles</title>
<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 no-repeat;
z-index:1;
}
</style>
<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(){
//1.瞬间拉回
oPage.style.transition = 'none';
oPage.style.WebkitTransform = 'perspective(800px) rotateY(0deg)';
//2.换图
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>
</head>
<body>
<div id="box">
<div class="page">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="page2"></div>
</div>
</body>
</html>
