纯CSS 3D翻转的导航菜单

一款纯CSS 3D翻转的导航菜单，鼠标悬停在导航菜单上面时，菜单有一个3D向上翻转显示翻转后的菜单文字的效果，鼠标离开时自动向下翻转显示原有内容，每一个菜单的样式都可以自由调整。

分类：导航菜单 > 动画导航难易：初级

查看演示下载资源下载积分： 8 积分

页面的head部分，仅需引入页面的CSS样式文件即可，代码如下：

<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分，div容器里放入多个a标签作为导航菜单，代码如下：

<div class="container">
  <a href="http://www.sucaihuo.com" class="social-container twitter">
    <div class="social-cube">
      <div class="front">
        sucaihuo
      </div>
      <div class="bottom">
        @Richer
      </div>
    </div>
  </a>
  <a href="#" class="social-container facebook">
    <div class="social-cube">
      <div class="front">
        weixin
      </div>
      <div class="bottom">
        Username
      </div>
    </div>
  </a>
  <a href="#" class="social-container youtube">
    <div class="social-cube">
      <div class="front">
        weibo
      </div>
      <div class="bottom">
        Username
      </div>
    </div>
  </a>
  <a href="#" class="social-container github">
    <div class="social-cube">
      <div class="front">
        QQ
      </div>
      <div class="bottom">
        Username
      </div>
    </div>
  </a>
  <a href="#" class="social-container dribbble">
    <div class="social-cube">
      <div class="front">
        email
      </div>
      <div class="bottom">
        Username
      </div>
    </div>
  </a>
  <a href="#" class="social-container codepen">
    <div class="social-cube">
      <div class="front">
        renren
      </div>
      <div class="bottom">
        Username
      </div>
    </div>
  </a>
</div>