CSS3盾牌2D效果
将原本的图片打乱然后鼠标触摸恢复原状，实现这种效果主要用到过渡（transition）和移动（translate）；
过渡可以实现元素不同状态之间的平滑过渡（补间动画），补间动画意思是自动完成从起始状态到终止状态的过渡，经常用来制作动画效果
只要当前有属性发生变化时，可以平滑的进行过渡，不仅仅局限在hover上。
移动translate(x,y)可以改变元素的位置，课为负值，移动位置相当于自身原来的位置，y轴的正方向向下。
ratate可以对元素进行旋转，正值为顺时针，负值为逆时针，元素旋转坐标轴也会跟着变化，调整顺序可以解决，把旋转放到最后
代码如下：
我这里对于补间动画只是稍微做了写介绍，如果你对补间动画感兴趣可看看http://mux.alimama.com/posts/1009<style> html,body{ height: 100%; } body{ margin: 0; padding: 0; overflow: hidden; } section{ height:100%; background: #2AB561; } .shield{ width: 440px; margin:0 auto; } .shield img { transition: all 1s linear; } img:nth-child(1){ transform: translate(100px,120px) rotate(30deg); } img:nth-child(2){ transform: translate(50px,120px) rotate(30deg); } img:nth-child(3){ transform: translate(10px,220px) rotate(40deg); } img:nth-child(4){ transform: translate(-150px,10px) rotate(130deg); } img:nth-child(5){ transform: translate(150px,100px) rotate(20deg); } img:nth-child(6){ transform: translate(100px,10px) rotate(10deg); } img:nth-child(7){ transform: translate(-90px,10px) rotate(130deg); } img:nth-child(8){ transform: translate(10px,100px) rotate(20deg); } img:nth-child(9){ transform: translate(-50px,10px) rotate(10deg); } .shield:hover img{ transform: translate(0,0) rotate(0); } </style> <body> <section> <div class="shield"> <img src="images/shield_1_01.png" alt=""> <img src="images/shield_1_02.png" alt=""> <img src="images/shield_1_03.png" alt=""> <img src="images/shield_1_04.png" alt=""> <img src="images/shield_1_05.png" alt=""> <img src="images/shield_1_06.png" alt=""> <img src="images/shield_1_07.png" alt=""> <img src="images/shield_1_08.png" alt=""> <img src="images/shield_1_09.png" alt=""> </div> </section> </body>