clip-path的任意元素的碎片拼接动效

看了张大神的这篇文章后自己写的，兼容性不好clip-path要加-webkit-

css

            #test img{position: absolute;}
            .active .clip{
                will-change: transform;
                animation: clear_transform .5s both;
            }
            @keyframes clear_transform {
                to {
                    opacity: 1;
                    transform: translate3d(0, 0, 0) rotate(0) scale(1);
                }
            }
            .active #image{
                opacity: 0;
                animation: fadeIn  .1s .4s both;
            }
            @keyframes fadeIn {
              from { opacity: 0; }
              to { opacity: 1; }
            }
            #repeat{position: absolute;top: 200px;}

html

<div id="test">
            <img src="http://img.mswon.com/img.php?url=http://npic7.edushi.com/cn/zixun/zh-chs/2016-05/31/e-3053153-s1464644414872299.jpg" id='image'/>
        </div>
        <button id='repeat'>再来一次</button>

JS

test('image');//image-id
        function test(ele){    
            var clip = {
                parent:'',
                id:ele,
                src:'',
                num:0,//裁剪个数
                x_tier:10,//X轴要裁剪的个数
                y_tier:10,//Y轴要裁剪的个数
                h:0,//图片高度
                w:0,//图片宽度
                y:0,//要裁剪的高度40
                x:0//要裁剪的宽度60
            }
            clip.parent = document.getElementById(ele).parentNode;//图片父级div
            var img = document.getElementById(clip.id);
            img.onload = function(){
                clip.src = img.getAttribute('src');
                clip.h = img.clientHeight;
                clip.w = img.clientWidth;
                clip.x = clip.w/clip.x_tier;
                clip.y = clip.h/clip.y_tier;
                clip.num = clip.num*clip.num;
                start_clip();
            }
            function start_clip(){
                var info = '<img src="'+clip.src+'" id="image" style="opacity:0;"/>';
                for (var i = 0;i<clip.x_tier;i++){
                    for (var j = 0;j<clip.y_tier;j++) {//(x,y)
                        //裁剪
                        var d1 = (clip.x*j)+'px '+(clip.y*i)+'px';
                        var d2 = (clip.x*j)+'px '+(clip.y*i+clip.y)+'px';
                        var d3 = (clip.x*j+clip.x)+'px '+(clip.y*i+clip.y)+'px';
                        var d4 = (clip.x*j+clip.x)+'px '+(clip.y*i)+'px';
                        var css1 = '-webkit-clip-path: polygon('+d1+','+d2+','+d3+','+d4+');';
                        //旋转
                        var r = random(360)+'deg';
                        //位移
                        var t_x = random(500)+'px';
                        var t_y = random(350)+'px';
                        var t_z = random(100)+'px';
                        //缩放
                        var s = random(1);
                        var css2 = '-webkit-transform:translate3d('+t_x+','+t_y+','+t_z+') rotate('+r+') scale('+s+');';
                        info +='<img class="clip" src="'+clip.src+'" style="'+css1+''+css2+'"/>'
                    }        
                }
                clip.parent.innerHTML = info;
                clip.parent.className = 'active';
            }
            //随机数
            function random(n){
                var num = Number(Math.random()*n).toFixed(1);
                return num;
            }
            document.getElementById('repeat').onclick = function(){
                clip.parent.innerHTML = '<img src="'+clip.src+'" id="'+clip.id+'"/>';
                test(clip.id);
            }
        }

 代码地址