图片爆炸3D效果

 之前逛园子的时候看到 ChokCoco 的**效果作品：【BOOM】一款有趣的Javascript动画效果 （大神英文有没有拼错呀←.←），觉得蛮有意思的，效果如下：

不过觉得这个**效果还是偏软了一点，没有**那种碎片飞溅的感觉，一直念念不忘想要自己做一个3D效果的**动效。这两天在搞一些小动画，就顺便也把3D**做了出来，动画效果：

实现

原理很简单，就是用很多小图片拼凑成大图片，然后让小图片按照一定规律运动形成**效果。这里的**效果用的是 CSS3 的 3D 变换来做的，通过 js 动态改变变换参数形成动画。实现步骤简单说说：

1、图片拼凑

这一步相对简单，用的是很多 div 标签的背景图拼凑的，设置好每个 div 标签的 position 和 background-position 就可以了。这里要注意的一点就是添加 div 标签是记得要用 innerHTML 一次性全部添加进去。虽然这里没有直接显示图片，但是这里还是 new 了一个 image，并将图片拼凑放在 load 事件中执行。效果和代码分别如下(实际效果没格子线的)：

var img = new Image();img.src = 'img/zoro.jpg';  //160*160，or you need to change wrapper's sizeimg.onload = function () {  var x = y = 0,  div = styleCtn = '',  imgWidth = this.width,  imgHeight = this.height,  pwidth = pheight = 10,  nx = Math.floor(imgWidth / pwidth),  //x方向粒子个数  ny = Math.floor(imgHeight / pheight),  //y方向粒子个数  wrap = document.getElementById('zd-wrap');            for (var i = 0, num = nx * ny; i < num; i++) {    x = (i % nx) * pwidth;    y = Math.floor(i / ny) * 10;  styleCtn = 'left: ' + x + 'px; top: ' + y + 'px; background-position: ' + (-x) + 'px ' + (-y) + 'px;';  div = div + '<div color: #0000ff;">this.src + '); ' + styleCtn + '"></div>';  }  wrap.innerHTML = div;  //添加图片};

原标题：图片爆炸3D效果

关键词：图片