forked from Crise420WMT/crise420wmt.github.com
-
Notifications
You must be signed in to change notification settings - Fork 0
/
h5_3dEffect2.html
65 lines (62 loc) · 2.4 KB
/
h5_3dEffect2.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
53
54
55
56
57
58
59
60
61
62
63
64
65
<!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;}
#box span{position: absolute;transform-style:preserve-3d;transform:perspective(800px);
}
i,em{width:100%;height: 100%;position: absolute;left: 0;top:0;}
i{background-image: url("image/3dEffect_0.jpg");backface-visibility:hidden;z-index: 2;}
em{background-image:url('image/3dEffect_1.jpg');z-index: 1;transform:scale(-1,1);}
</style>
<script>
window.onload=function(){
var oBox=document.querySelector('#box');
var C=7;
var R=4;
var iNow=0;
//console.log({w:oBox.offsetWidth,h:oBox.offsetHeight});
for(var r=0;r<R;r++){
for(var c=0;c<C;c++){
var oSpan=document.createElement('span');
oSpan.innerHTML='<i></i><em></em>';
oSpan.style.width=oBox.offsetWidth/C+'px';
oSpan.style.height=oBox.offsetHeight/R+'px';
//console.log(oSpan.offsetHeight);
oBox.appendChild(oSpan);
oSpan.style.left=oSpan.offsetWidth*c+'px';
oSpan.style.top=oSpan.offsetHeight*r+'px';
var oI=oSpan.children[0];
var oEm=oSpan.children[1];
oI.style.backgroundPosition='-'+oSpan.offsetLeft+'px -'+oSpan.offsetTop+'px';
oEm.style.backgroundPosition='-'+oSpan.offsetLeft+'px -'+oSpan.offsetTop+'px';
oSpan.c=c;
oSpan.r=r;
}
}
var aSpan=oBox.children;
oBox.onclick=function(){
for(var i=0;i<aSpan.length;i++){
aSpan[i].style.transition='0.5s all ease '+(aSpan[i].c+aSpan[i].r)*100+'ms';
aSpan[i].style.transform='perspective(800px) rotateY(180deg)';
}
};
aSpan[aSpan.length-1].addEventListener('transitionend',function(){
iNow++;
for(var i=0;i<aSpan.length;i++){
aSpan[i].style.transition='none';
aSpan[i].style.transform='';
aSpan[i].children[0].style.backgroundImage='url(image/3dEffect_'+iNow%3+'.jpg)';
aSpan[i].children[1].style.backgroundImage='url(image/3dEffect_'+(iNow+1)%3+'.jpg)';
}
},false);
};
</script>
</head>
<body>
<div id="box">
</div>
</body>
</html>