SOURCE

<div class="box">
	<div class="card front">
  正面--------------------
  <br/>
  ++++++++++++++++++++
  </div>
	<div class="card back">
  反面--------------------
  <br/>
  ++++++++++++++++++++
  </div>
</div>

.box{
  margin: 50px auto;
  width: 200px;
  height: 200px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 2s;
  border: 1px solid #666;
  border-radius: 3px;
}
.card{
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
}
.front{
	background-color: red;
}
.back{
	transform: rotateY(180deg);
  background-color: green;
}
.box:hover{
	transform: rotateY(180deg);
}