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）对用户一些影响当前变换的操作进行约束
分散效果重点：
每一个小块的transform：translate('+(aSpan[i].offsetLeft-oBox.offsetWidth/2)+'px,'+(aSpan[i].offsetTop -oBox.offsetHeight/2)+'px) rotateX('+rnd(-180,180)+'deg) rotateY('+rnd(-180,180)+'deg) scale(1.4)
每个小块的transform: aSpan[i].style.transform='perspective(800px) rotateY(-180deg)'
transition: aSpan[i].style.transition='500ms all ease '+(aSpan[i].c+aSpan[i].r)*200+'ms'
第四个参数代表等待运动的时间，故生成依次轮流翻转的效果
document.onmouseover=function(){
当前那个元素的transform：rotateZ(90deg)
}
依次出现的效果：
oBj.style.transform ='rotateY('+i*360/N+'deg) translateZ(300px)'
布局如下：
<div id="box">
<div id="page">
<div class="front"></div>
<div class="back"></div>
</div>
<div id="page2"></div>
</div>
#page是当前的图片 ，#page2是将要变换的图片，其中#page的front背景图片和#box的背景图片拼成一张当前显示的图片，#page的back背景图片和#page2的背景图片拼成一张即将要换的图片
如果版式也乱了 说明是css文件路径错误。
如果版式正常，只是图片不显示，就是图片路径写错了。
在本地和服务器上文件路径有些不同，服务器上可以试着改为绝对路径试试。
1、检查看看样式表是否调用成功
2、检查一下背景图片的调用路径，比如 background:url(../images/bg.jpg) 0 0 no-repeat样式表里调用路径前面要加"../"或者"../../"
3、检查一下定义样式是否写对了.
原始处理方法是将要展示的图片进行处理。比如你的DIV宽度为500px(像素)，那你上传的图片或放入网页的图片宽度就要小于500px，也就是你图片需要图片软件剪切、等比例缩小方法处理后再上传、放入网页中解决撑破撑开DIV问题。常见很多大型图片站点、新闻站点都是将照片图片进行处理适应网页宽度情况下，进行图片编辑处理的。
二、防止图片撑开DIV方法二
如果不处理照片方法适应DIV有限宽度，那可以对DIV设置隐藏超出内容方法。只需要对DIV设置宽度后加入CSS样式“overflow:hidden”即可解决隐藏图片比DIV过宽部分解决撑破DIV问题。
三、解决方法三
对图片img标签中只加入宽度即可解决。这样可以等比例缩小图片，不会影响图片画面质量。
比如你的网页DIV宽度为500px，那你上传图片后对img标签设置width等于500以下即可。
即可解决图片过宽导致DIV SPAN撑破，这样好处可以等比例放大缩小图片。
四、CSS解决撑破方法四
这种方法使用CSS直接对div内的img进行宽度设置，这样不好是如果图片过小会影响网页浏览图片时候效果。
