See the Pen Flip Pen Navigation by webopixel (@webopixel) on CodePen.

HTML

タグはaタグの中にspanを入れてます。
span２つにして表裏にした方が直感的ですがマークアップ的に微妙な気がしたので、aにtitle属性を設定してCSSの擬似要素で裏側のボタンスタイルを作成することにします。

html
<nav class="flip-nav">
  <ul>
    <li class="nav01">
      <a href="#" class="flip-btn" title="HOME">
        <span>HOME</span>
      </a>
    </li>
    <li class="nav02">
      <a href="#" class="flip-btn" title="ABOUT">
        <span>ABOUT</span>
      </a>
    </li>
    <li class="nav03">
      <a href="#" class="flip-btn" title="WORKS">
        <span>WORKS</span>
      </a>
    </li>
    <li class="nav04">
      <a href="#" class="flip-btn" title="CONTACT">
        <span>CONTACT</span>
      </a>
    </li>
  </ul>
</nav>

CSS

拡大するときはscaleだと荒くなってしまうので、matrixを使用するといい感じです。

CSS
nav.flip-nav {
  margin: 30px auto;
  width: 800px;
  max-width: 100%;
}


nav.flip-nav > ul {
  list-style: none;
  display: flex;


}
nav.flip-nav > ul > li {
  width: 100%;
}
.flip-btn {
  font-size: 16px;
  height: 60px;
  line-height: 60px;
  display: block;
  position: relative;
  text-decoration: none;
}


.flip-btn:after,
.flip-btn span {
  display: block;
  position: absolute;
  background: #bbb;
  text-align: center;
  color: #fff;
  width: 100%;
  height: 100%;
  transition: transform .3s;
}


/* 表側 */
.flip-btn span {
  transform: rotateX(0deg) translateZ(30px);
}
.flip-btn:hover span {
  transform: rotateX(-90deg) translateZ(30px);
}
/* 裏側 */
.flip-btn:after {
  content: attr(title);
  transform: rotateX(90deg) translateZ(30px);
}
.flip-btn:hover:after {
  transform: rotateX(0deg) translateZ(30px);
}




.nav01 span {
  background: #F47BBC;
}
.nav01 .flip-btn:after {
  background: #AF5686;
}
.nav02 span {
  background: #7BA0F4;
}
.nav02 .flip-btn:after {
  background: #5A76B5;
}
.nav03 span {
  background: #77C944;
}
.nav03 .flip-btn:after {
  background: #5A9834;
}
.nav04 span {
  background: #E0A759;
}
.nav04 .flip-btn:after {
  background: #A2783E;
}

くるっとなる動きでメインとなるのは、36〜50行目のtransformの部分です。
rotateXだけだと中心から回転するので、translateZも指定することで表裏で入れ替わるような動きになります。
translateZの数値はボタンのheightの半分の値を入れてください。