首先建立大盒子包含列表和a标签，a标签里面又包含两个用于翻转效果的span。

<div class="nav">
    <ul>
      <li>
        <a href="">
          <span>index</span>
          <span>首页</span>
        </a>
      </li>
    </ul>
  </div>

样式：

 li {
      list-style: none;
    }

    .nav {
      margin: 100px;
    }

    .nav li {
      perspective: 200px;
      float: left;
      width: 150px;
      height: 50px;
      background-color: pink;
      margin: 0 20px;
    }

    .nav li a {

      position: relative;
      display: block;
      width: 100%;
      height: 100%;
      text-decoration: none;
      color: #fff;
      font-size: 18px;
      transition: all .3s;
      /* 让子盒子立体空间展示 */
      transform-style: preserve-3d;
    }

    .nav li a span {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      text-align: center;
      line-height: 50px;
    }

    .nav li span:nth-child(1) {
      background-color: orange;
      /* 上面盒子  沿着x轴旋转90度， 往上走 y 25px 负值*/
      transform: translateY(-25px) rotateX(90deg);
    }

    .nav li span:nth-child(2) {
      background-color: green;
      /* 往我们面前移动 25px， z轴   正值*/
      transform: translateZ(25px);
    }

鼠标经过盒子时整个a标签翻转样式

.nav li a:hover {
      transform: rotateX(-90deg);
    }

最终效果：