CSS3翻转特效；

CSS代码：

*{padding: 0;margin: 0;}
.container{width: 90%;padding: 5%;height: 12rem;display: flex;justify-content:space-around; }
.container  > div{width: 160px;height: 160px;}
img{width: 100%;height: 100%;display: block;overflow: hidden;}
a{transition:all 1s ease;display: block;height: 100%;}
span{color: #fff; text-align: center;line-height: 160px;}
/*div1*/
.div1 span{display:none;height:100%;background-color:blue;transform:rotateX(-180deg);}
.a1:hover img{display: none;}
.a1:hover span{display: block;}
.a1:hover{transform:rotateX(180deg) scale(.9,.9 );}

/*div2*/
.div2 span{display:none;height:100%;background-color:blue;transform:rotateY(-180deg);}
.a2:hover img{display: none;}
.a2:hover span{display: block;}
.a2:hover{transform:rotateY(180deg) scale(.9,.9 );}

/*div3*/
.div3{perspective:1000px;}
.div3 a{transform-style:preserve-3d;transition:all .5s ease;}
.div3 span{display:block;height: 160px;background-color:blue;transform-origin:50% 0;transform:rotateX(-90deg); }
.a3:hover{transform:rotateX(90deg) translate3d(0,-80px,80px);}

/*div4*/
.div4{perspective:1000px;}
.div4 a{transform-style:preserve-3d;transition:all .5s ease;}
.div4 span{display:block;height: 160px;background-color:blue;transform-origin:50% 100%;transform:translateY(-320px) rotateX(90deg);}
.a4:hover{transform:rotateX(-90deg) translate3d(0,80px,80px);}

/*div5*/
.div5{perspective:1000px;}
.div5 a{transform-style:preserve-3d;transition:all .5s ease;}
.div5 span{display:block;height: 160px;background-color:blue;transform-origin:0 50%;transform:translate(100%,-100%) rotateY(90deg); }
.a5:hover{transform:rotateY(-90deg) translate3d(-80px,0,80px);}


/*div5*/
.div6{perspective:1000px;}
.div6 a{transform-style:preserve-3d;transition:all .5s ease;}
.div6 span{display:block;height: 160px;background-color:blue;transform-origin:100% 50%;transform:translate(-100%,-100%) rotateY(-90deg); }
.a6:hover{transform:rotateY(90deg) translate3d(80px,0,80px);}

HTML：

<section class="container">
        <div class="div1">
                <a href="###" class="a1">
                        <img src="http://img.woyaogexing.com/2016/05/03/bb771ee6c49a26d9!200x200.png">
                        <span>轴向二维翻转</span>
                </a>
        </div>
        <div class="div2">
                <a href="###" class="a2">
                        <img src="http://img.woyaogexing.com/2016/05/03/bb771ee6c49a26d9!200x200.png">
                        <span>横向向二维翻转</span>
                </a>
        </div>
        <div class="div3">
                <a href="###" class="a3">
                        <img src="http://img.woyaogexing.com/2016/05/03/bb771ee6c49a26d9!200x200.png">
                        <span>3D上翻转</span>
                </a>
        </div>
     </section>
    <section class='container'>

        <div class="div4">
                <a href="###" class="a4">
                        <img src="http://img.woyaogexing.com/2016/05/03/bb771ee6c49a26d9!200x200.png">
                        <span>3D下翻转</span>
                </a>
        </div>
        <div class="div5">
                <a href="###" class="a5">
                        <img src="http://img.woyaogexing.com/2016/05/03/bb771ee6c49a26d9!200x200.png">
                        <span>3D右翻转</span>
                </a>
        </div>
        <div class="div6">
                <a href="###" class="a6">
                        <img src="http://img.woyaogexing.com/2016/05/03/bb771ee6c49a26d9!200x200.png">
                        <span>3D左翻转</span>
                </a>
        </div>
</section>

DEMO地址：http://codepen.io/jonechen/pen/JXwzKQ