图片立体切换轮播动画，HTML5动画

        基于HTML5的svg动画制作的立体图片轮播效果。兼容IE9+。左右箭头使用svg画出来的。图片从四周向中间，一次分成多个立体方块，旋转切换成下一张图片。

<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />

<div id="wall" class="wall">
  <div class="cube">
    <div class="side front"></div>
    <div class="side right"></div>
    <div class="side back"></div>
    <div class="side left"></div>
    <div class="side top"></div>
    <div class="side bottom"></div>
  </div>
  <div class="cube">
    <div class="side front"></div>
    <div class="side right"></div>
    <div class="side back"></div>
    <div class="side left"></div>
    <div class="side top"></div>
    <div class="side bottom"></div>
  </div>
  <div class="cube">
    <div class="side front"></div>
    <div class="side right"></div>
    <div class="side back"></div>
    <div class="side left"></div>
    <div class="side top"></div>
    <div class="side bottom"></div>
  </div>
  <div class="cube">
    <div class="side front"></div>
    <div class="side right"></div>
    <div class="side back"></div>
    <div class="side left"></div>
    <div class="side top"></div>
    <div class="side bottom"></div>
  </div>
  <div class="cube">
    <div class="side front"></div>
    <div class="side right"></div>
    <div class="side back"></div>
    <div class="side left"></div>
    <div class="side top"></div>
    <div class="side bottom"></div>
  </div>
  <div class="cube">
    <div class="side front"></div>
    <div class="side right"></div>
    <div class="side back"></div>
    <div class="side left"></div>
    <div class="side top"></div>
    <div class="side bottom"></div>
  </div>
  <div class="cube">
    <div class="side front"></div>
    <div class="side right"></div>
    <div class="side back"></div>
    <div class="side left"></div>
    <div class="side top"></div>
    <div class="side bottom"></div>
  </div>
  <div class="cube">
    <div class="side front"></div>
    <div class="side right"></div>
    <div class="side back"></div>
    <div class="side left"></div>
    <div class="side top"></div>
    <div class="side bottom"></div>
  </div>
  <div class="cube">
    <div class="side front"></div>
    <div class="side right"></div>
    <div class="side back"></div>
    <div class="side left"></div>
    <div class="side top"></div>
    <div class="side bottom"></div>
  </div>
  <div class="cube">
    <div class="side front"></div>
    <div class="side right"></div>
    <div class="side back"></div>
    <div class="side left"></div>
    <div class="side top"></div>
    <div class="side bottom"></div>
  </div>
  <div class="cube">
    <div class="side front"></div>
    <div class="side right"></div>
    <div class="side back"></div>
    <div class="side left"></div>
    <div class="side top"></div>
    <div class="side bottom"></div>
  </div>
  <div class="cube">
    <div class="side front"></div>
    <div class="side right"></div>
    <div class="side back"></div>
    <div class="side left"></div>
    <div class="side top"></div>
    <div class="side bottom"></div>
  </div>
  <div class="cube">
    <div class="side front"></div>
    <div class="side right"></div>
    <div class="side back"></div>
    <div class="side left"></div>
    <div class="side top"></div>
    <div class="side bottom"></div>
  </div>
  <div class="cube">
    <div class="side front"></div>
    <div class="side right"></div>
    <div class="side back"></div>
    <div class="side left"></div>
    <div class="side top"></div>
    <div class="side bottom"></div>
  </div>
  <div class="cube">
    <div class="side front"></div>
    <div class="side right"></div>
    <div class="side back"></div>
    <div class="side left"></div>
    <div class="side top"></div>
    <div class="side bottom"></div>
  </div>
  <div class="cube">
    <div class="side front"></div>
    <div class="side right"></div>
    <div class="side back"></div>
    <div class="side left"></div>
    <div class="side top"></div>
    <div class="side bottom"></div>
  </div>
  <div class="cube">
    <div class="side front"></div>
    <div class="side right"></div>
    <div class="side back"></div>
    <div class="side left"></div>
    <div class="side top"></div>
    <div class="side bottom"></div>
  </div>
  <div class="cube">
    <div class="side front"></div>
    <div class="side right"></div>
    <div class="side back"></div>
    <div class="side left"></div>
    <div class="side top"></div>
    <div class="side bottom"></div>
  </div>
  <div class="cube">
    <div class="side front"></div>
    <div class="side right"></div>
    <div class="side back"></div>
    <div class="side left"></div>
    <div class="side top"></div>
    <div class="side bottom"></div>
  </div>
  <div class="cube">
    <div class="side front"></div>
    <div class="side right"></div>
    <div class="side back"></div>
    <div class="side left"></div>
    <div class="side top"></div>
    <div class="side bottom"></div>
  </div>
  <div class="cube">
    <div class="side front"></div>
    <div class="side right"></div>
    <div class="side back"></div>
    <div class="side left"></div>
    <div class="side top"></div>
    <div class="side bottom"></div>
  </div>
  <div class="cube">
    <div class="side front"></div>
    <div class="side right"></div>
    <div class="side back"></div>
    <div class="side left"></div>
    <div class="side top"></div>
    <div class="side bottom"></div>
  </div>
  <div class="cube">
    <div class="side front"></div>
    <div class="side right"></div>
    <div class="side back"></div>
    <div class="side left"></div>
    <div class="side top"></div>
    <div class="side bottom"></div>
  </div>
  <div class="cube">
    <div class="side front"></div>
    <div class="side right"></div>
    <div class="side back"></div>
    <div class="side left"></div>
    <div class="side top"></div>
    <div class="side bottom"></div>
  </div>
  <div class="cube">
    <div class="side front"></div>
    <div class="side right"></div>
    <div class="side back"></div>
    <div class="side left"></div>
    <div class="side top"></div>
    <div class="side bottom"></div>
  </div>
  <div class="nav">
    <div id="prev" class="button prev">
    	<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 10 28">
        	<path d="M0.703 15q0-0.203 0.156-0.359l7.281-7.281q0.156-0.156 0.359-0.156t0.359 0.156l0.781 0.781q0.156 0.156 0.156 0.359t-0.156 0.359l-6.141 6.141 6.141 6.141q0.156 0.156 0.156 0.359t-0.156 0.359l-0.781 0.781q-0.156 0.156-0.359 0.156t-0.359-0.156l-7.281-7.281q-0.156-0.156-0.156-0.359z" fill="#000000">
            </path>
        </svg>
    </div>
    <div id="next" class="button next">
    	<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 10 28">
        	<path d="M0.203 21.5q0-0.203 0.156-0.359l6.141-6.141-6.141-6.141q-0.156-0.156-0.156-0.359t0.156-0.359l0.781-0.781q0.156-0.156 0.359-0.156t0.359 0.156l7.281 7.281q0.156 0.156 0.156 0.359t-0.156 0.359l-7.281 7.281q-0.156 0.156-0.359 0.156t-0.359-0.156l-0.781-0.781q-0.156-0.156-0.156-0.359z" fill="#000000">
            </path>
        </svg>
    </div>
  </div>
</div>

<script src="js/5imoban.net.js"></script>

var url = 'images/minion_';