<p class="container">
    <p class="side">
        <p class="front">
           <!-- 正面 -->
        </p>
        <p class="back">
           <!-- 反面 -->
        </p>
</p>

.container {
   perspective: 1000;
  }
.container:hover .side{  
   transform: rotateY(180deg);
}
.container, .front, .back {
  width: 320px;
  height: 480px;
}
.side {
  transition: 0.6s;
  transform-style: preserve-3d;  /*让其子元素有3D翻转的效果。*/
  position: relative;
}
.front, .back {
  backface-visibility: hidden; /*将反转了180度的隐藏*/
  -ms-backface-visibility: hidden;
  position: absolute;
}
.front {
  background-color: red;
}
.back {
  transform: rotateY(180deg);
  background-color: blue;
}
 

比较郁闷的是，在其他浏览器都能正常显示效果，但是IE不行，backface-visibility: hidden;这句单独在IE下测试是可以用的，但是这里放一起就出问题了，在IE下它翻转180度后并没有隐藏，这是为什么，哪位大神帮我看看，先谢过啦。