超炫的图片爆炸效果

css样式：

<style type="text/css">
    *{margin: 0;padding: 0;list-style: none;}
    body{overflow: hidden;}
    #div{
        width: 640px;height: 400px;position: absolute;left: 50%;top: 50%;margin: -200px 0 0 -320px;box-shadow: 0 0 10px black;
    }
    #div>div{
        width: 100%;height: 100%;position: absolute;left: 0;top: 0;z-index:1;
    }
</style>

html结构：

<div id='div'></div>

js脚本：

<script type="text/javascript">
    var imgSrc = ['1.jpg','2.jpg','3.jpg'];
    var index = 0;
    var zIndex = 99999999;
    startBang(random(3,9),random(3,9));
    function random(min,max){
        return parseInt(Math.random()* (max - min)) + (++min);
    };
    function startBang(x,y){
        var X = x;
        var Y = y;
        var codeNode = document.createElement('div');
        codeNode.style.zIndex = zIndex;
        zIndex--;
        div.appendChild(codeNode);
        for(var i = 0;i < Y; i++){
            for(var j = 0; j < X ;j++){
                var w = div.offsetWidth / X;
                var h = div.offsetHeight / Y;
                var oDiv = document.createElement('div');
                oDiv.style.width = w +'px';
                oDiv.style.height = div.offsetHeight / Y +'px';
                oDiv.style.float = 'left';
                oDiv.style.background = 'url('+imgSrc[index]+')';
                oDiv.style.backgroundPositionX = -w * j + 'px';
                oDiv.style.backgroundPositionY = -h * i + 'px'
                codeNode.appendChild(oDiv);
            }
        };

        setTimeout(function(){
            for(var i = 0;i<codeNode.children.length;i++){
                codeNode.children[i].style.transition = ((Math.random() * 2.5)+0.5)+'s all ease';
                codeNode.children[i].style.transform = 'perspective(800px) translateX('+random(-300,300) +'px) translateY('+ random(-300,300) +'px) rotateX('+random(-720,720) +'deg) rotateY('+random(-720,720) +'deg) scale('+Math.random()*3+','+Math.random()*3+')' ;
                codeNode.children[i].style.opacity = 0;
            }
            index++;
            if(index == imgSrc.length)index = 0;
            startBang(random(3,9),random(3,9));
        },3000);
        setTimeout(function(){
            codeNode.parentNode.removeChild(codeNode);
        },6000);
    }
    </script>