创建一个父盒子和两个子盒子。

<div class="cube">
  <div class="front">前</div>
  <div class="back">后</div>
</div>

给父盒子和子盒子创建样式。

.cube{
      width: 200px;
      height: 200px;
      position: relative;
      margin: 100px auto;
      transition: all .7s;
      /* 让子元素3d空间显示 */
      transform-style: preserve-3d;
    }


    .cube div{
      width: 200px;
      height: 200px;
      color: white;
      text-align: center;
      line-height: 200px;
      position: absolute;
    }

    .front{
      background-color: blue;
      /*以父元素Y轴为中心向前移动*/
      transform: translateZ(100px);
    }

    .back{
      background-color: red;
      /*以父元素Y轴为中心向后移动*/
      transform: translateZ(-100px);
    }

设置鼠标经过旋转效果：

.cube:hover{
      transform: rotateY(180deg);
    }

最终效果：