forked from Crise420WMT/crise420wmt.github.com
-
Notifications
You must be signed in to change notification settings - Fork 0
/
h5_3dEffect3.html
52 lines (52 loc) · 2.05 KB
/
h5_3dEffect3.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#box{background:silver;width: 700px;height: 400px;position: relative;margin: 150px auto;
background: url("image/3dEffect_0.jpg");}
.page1,.page2{width: 50%;height: 100%;position: absolute;right: 0;top:0;
transform:perspective(800px);}
.page1{transform-origin:left center;z-index: 10;transform-style:preserve-3d;
transform:rotateY(0deg);}
.front,.back{width: 100%;height: 100%;position: absolute;left: 0;top:0;}
.front{background: url('image/3dEffect_0.jpg') right 0;transform: translateZ(1px);}
.back{background: url('image/3dEffect_1.jpg');transform:translateZ(-1px) scale(-1,1);}
.page2{background: url('image/3dEffect_1.jpg') right 0;}
</style>
<script>
window.onload=function(){
var oBox=document.querySelector('#box');
var aPage=oBox.children;
//var oFront=aPage.children[0];
//var oBack=aPage.children[1];
var iNow=0;
oBox.onclick=function(){
aPage[0].style.transition='1s ease all';
aPage[0].style.transform='perspective(800px) rotateY(-180deg)';
};
aPage[0].addEventListener('transitionend',function(){
iNow++;
//aPage[0].style.transition='none';---都可以不写
//aPage[0].style.transform=''; --都可以不写
aPage[0].style.transition='none';
aPage[0].style.transform='perspective(800px) rotateY(0deg)';
oBox.style.background='url(image/3dEffect_'+iNow%3+'.jpg)';
aPage[0].children[0].style.background='url(image/3dEffect_'+iNow%3+'.jpg) right 0';
aPage[0].children[1].style.background='url(image/3dEffect_'+(iNow+1)%3+'.jpg)';
aPage[1].style.background='url(image/3dEffect_'+(iNow+1)%3+'.jpg) right 0';
},false)
};
</script>
</head>
<body>
<div id="box">
<div class="page1">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="page2"></div>
</div>
</body>
</html>