html图片向两边展开效果,通过CSS3 transform实现图片浏览的几种效果

通过css3和DOM操作，可以实现多种图片浏览的效果 但是大致思路都是一致的：

1)通过DOM操作循环创建出来一组元素

document.createElement('标签名')；

父级.appendChild('obj');

2)给每一个创建出来的元素添加transform变换效果

obj.style.transform=' rotateX(30deg)';

obj.style.transition='1s all ease';

3)当变换结束的时候，瞬间拉回变换并换底图

obj.addEventListener('transitionend',function(){},false};

obj.style.transform=' rotateX(0deg)';

obj.style.transition='none';

当前要显示的一面：url("img/'+iNow%3+'.jpg")；

即将要显示的一面：url("img/'+(iNow+1)%3+'.jpg")；

4)对用户一些影响当前变换的操作进行约束

1、爆炸式飞窗换图

分散效果重点：

每一个小块的transform࿱