forked from Crise420WMT/crise420wmt.github.com
-
Notifications
You must be signed in to change notification settings - Fork 0
/
h5_3dEffect1.html
61 lines (59 loc) · 2.43 KB
/
h5_3dEffect1.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
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
html,body{overflow: hidden;height: 100%;}
#box{width: 700px;height: 400px;background-image: url('image/3dEffect_1.jpg');position: relative;margin: 100px auto;
}
#box span{position: absolute;transform-style:preserve-3d;background-image: url('image/3dEffect_0.jpg');}
</style>
<script>
function rnd(n,m){
return parseInt(Math.random()*(m-n))+n;
}
window.onload=function(){
var oBox=document.querySelector('#box');
var C=7;
var R=4;
for(var r=0;r<R;r++){
for(var c=0;c<C;c++){
var oSpan=document.createElement('span');
oSpan.style.width=oBox.offsetWidth/C+'px';
oSpan.style.height=oBox.offsetHeight/R+'px';
oBox.appendChild(oSpan);
oSpan.style.left=oSpan.offsetWidth*c+'px';
oSpan.style.top=oSpan.offsetHeight*r+'px';
oSpan.style.backgroundPosition='-'+oSpan.offsetLeft+'px -'+oSpan.offsetTop+'px';
}
}
var aSpan=oBox.children;
var iNow=0;
oBox.onclick=function(){
iNow++;
for(var i=0;i<aSpan.length;i++){
aSpan[i].style.transition='1s all cubic-bezier(1, 0.13, 0, 0.99)';
var x=aSpan[i].offsetWidth/2+aSpan[i].offsetLeft-oBox.offsetWidth/2;
var y=aSpan[i].offsetHeight/2+aSpan[i].offsetTop-oBox.offsetHeight/2;
//console.log({x:x,y:y});
aSpan[i].style.transform='perspective(800px) scale(1.5) translate('+x+'px,'+y+'px) rotateX('+rnd(0,180)+'deg) rotateY('+rnd(0,180)+'deg)';
aSpan[i].style.opacity=0;
}
};
aSpan[0].addEventListener('transitionend',function(){
for(var i=0;i<aSpan.length;i++){
aSpan[i].style.transition='none';
aSpan[i].style.transform='';
aSpan[i].style.opacity=1;
aSpan[i].style.backgroundImage='url(image/3dEffect_'+iNow%3+'.jpg)';
oBox.style.backgroundImage='url(image/3dEffect_'+(iNow+1)%3+'.jpg)';
}
},false);
};
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>