设定Span覆盖在图片上并定位，点击事件加效果分别运动距离x,y运转角度rotate距离，设定图片循环点击及结束后清Span事件
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
</head>
<style>
*{margin:0;padding:0;}
html,body{overflow:hidden;}
#box{
width:700px;
height:400px;
background:url("img/1.jpg") no-repeat;
margin:100px auto;
position:relative;
}
#box span{
position:absolute;
background:url("img/0.jpg")no-repeat;
transform:perspective(800px) translate(0,0) rotateX(0deg) rotateY(0deg) scale(1);
}
</style>
<script>
function rnd(m,n){
return parseInt(m+Math.random()*(n-m));
}
document.addEventListener('DOMContentLoaded',function(){
var oBox=document.getElementById('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');
var w=oBox.offsetWidth/C;
var h=oBox.offsetHeight/R;
oSpan.style.width=w+'px';
oSpan.style.height=h+'px';
oSpan.style.left = w*c+'px';
oSpan.style.top = h*r+'px';
oBox.appendChild(oSpan);
oSpan.style.backgroundPosition=-oSpan.offsetLeft+'px -'+oSpan.offsetTop+'px';
}
}
var aSpan=oBox.children;
var iNow=0;
var bReady=true;
iNow++;
oBox.onclick=function(){
if(bReady==false)return;
bReady=false;
iNow++;
for(var i=0;i<aSpan.length;i++){
var x=aSpan[i].offsetLeft+aSpan[i].offsetWidth/2-oBox.offsetWidth/2;
var y=aSpan[i].offsetTop+aSpan[i].offsetHeight/2-oBox.offsetHeight/2;
aSpan[i].style.transition='1s all ease';
aSpan[i].style.transform='perspective(800px) translate('+x+'px,'+y+'px) rotateX('+rnd(-180,180)+'deg) rotateY('+rnd(-180,180)+'deg) scale(1.4)';
aSpan[i].style.opacity=0;
}
};
aSpan[0].addEventListener('transitionend',function(){
bReady=true;
for(var i=0;i<aSpan.length;i++){
aSpan[i].style.transition='none';
aSpan[i].style.transform='perspective(800px) translate(0,0) rotateX(0deg) rotateY(0deg) scale(1)';
aSpan[i].style.opacity = 1;
//换图
aSpan[i].style.backgroundImage = 'url("img/'+iNow%3+'.jpg")';
oBox.style.backgroundImage = 'url("img/'+((iNow+1)%3)+'.jpg")';
}
},false)
},false);
</script>
<body>
<div id="box"></div>
</body>
</html>
