CSS3翻转特效；

CSS代码：

*{padding: 0;margin: 0;}
.container{ 90%;padding: 5%;height: 12rem;display: flex;justify-content:space-around; }
.container  > div{ 160px;height: 160px;}
img{ 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