<style type="text/css">
	.card{width: 150px;height: 200px;position: relative;perspective: 800;-webkit-perspective: 1000px; perspective: 1000px;-moz-perspective: 1000px;}
	.card-z,.card-f{position: absolute;left: 0;top:0;width: 100%;height: 200px;line-height:200px;text-align: center;color: #fff;display: block;border-radius: 20px;
	 -webkit-transition: all 0.8s ease;transition: all 0.8s ease;-webkit-backface-visibility: hidden;backface-visibility: hidden;
	}
	.card-z{background: #007FFF;}
	.card-f{background: #008080;-webkit-transform: rotateY(180deg); transform: rotateY(180deg);}
	.card:hover .card-z {
	  -webkit-transform: rotateY(-180deg);
	          transform: rotateY(-180deg);
	}
	.card:hover .card-f {
	  -webkit-transform: rotateY(0);
	          transform: rotateY(0);
	}
</style>
<div class="card">
	<div class="card-z">正面</div>
	<div class="card-f">反面</div>
</div>