CSS3盾牌2D效果

将原本的图片打乱然后鼠标触摸恢复原状，实现这种效果主要用到过渡（transition）和移动（translate）；

过渡可以实现元素不同状态之间的平滑过渡（补间动画），补间动画意思是自动完成从起始状态到终止状态的过渡，经常用来制作动画效果

只要当前有属性发生变化时，可以平滑的进行过渡，不仅仅局限在hover上。

移动translate(x,y)可以改变元素的位置，课为负值，移动位置相当于自身原来的位置，y轴的正方向向下。

ratate可以对元素进行旋转，正值为顺时针，负值为逆时针，元素旋转坐标轴也会跟着变化，调整顺序可以解决，把旋转放到最后
代码如下：

<style>
    html,body{
        height: 100%;
    }
    body{
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
    section{
        height:100%;
        background: #2AB561;
    }
    .shield{
        width: 440px;
        margin:0