纯CSS实现 [导航栏3D旋转效果]

一个鼠标悬停后上下翻动的效果！(没办法录制gif图，只能鼠标悬停时截图，见谅一下啦🤦‍)

<style>
  .content{
    position:relative;
  }
  .content>div{
    position:absolute;
    top:0;
    left:0;
    width:100px;
    height:50px;
    line-height: 50px;
    text-align: center;
    transition: .2s;
    transform-style:preserve-3d;
  }
  .hover-b{
    transform-origin: 50% 0%;
    background:#000;
    color:#fff;
  }
  .hover-w{
    top:-50px;
    transform: rotateX(-90deg);
    transform-origin: 50% 0%;
  }
  .content:hover .hover-b{
    top:50px;
    transform:rotateX(90deg);
  }
  .content:hover .hover-w{
    top:0;
    transform:rotateX(0deg);
  }
</style>

<div class="content">
  <div class="hover hover-w">
    <span>HOVER</span>
  </div>
  <div class="hover hover-b">
    <span>HOVER</span>
  </div>
</div>