CSS 3D翻转动画

效果展示：

JS BIN

代码展示：

[html]

  

    

    

  

[css]

.card {
  width: 100px;
  height: 161.8px;
  perspective: 1000px; /*定义3D元素的视图距离*/
}
.card-inner {
  width: inherit;
  height: inherit;
  position: relative;
  transition: 0.5s;
  transform-style: preserve-3d; /*子元素将保留其 3D 位置。*/
}
.font,.back {
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden; /*隐藏被旋转的 div 元素的背面*/
}
.font {
  background: PaleTurquoise;
  transform: rotateY(180deg);
}
.back {
  background: Moccasin;
  transform: rotateY(0);
}
.card:hover .card-inner {
  transform: rotateY(180deg);
}

代码：JS Bin
参考代码：翻转扑克