css3实现3d翻转效果

效果图：

重点参数说明：

• 1、transform-style

开启3d效果

• 2、perspective

添加景深，增加3d视觉效果

• 3、backface-visibility

设置背面隐藏 完整代码：

<div class="tbfz">
  <div class="tbfz-in">
    <div class="face">正面</div>
    <div class="back">背面</div>
  </div>
</div>

<style>
    .tbfz {
    border: 1px solid #ccc;
    position: absolute;
    top: 150px;
    right: 200px;
    width: 200px;
    height: 300px;
    z-index: 999999999999;
    transform-style: preserve-3d;
    perspective: 400px;
    &-in {
      transform-style: preserve-3d;
      position: relative;
      height: 100%;
      width: 100%;
      transition: 1s;
      .face, .back {
        backface-visibility: hidden;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 1;
      }
      .face {
        z-index: 2;
        background-color: #f00;
      }
      .back {
        background-color: green;
        transform: rotateY(-180deg);
      }
    }
    &:hover .tbfz-in {
      transform: rotateY(180deg);
    }
  }
</style>