CSS3 3D立方體翻轉菜單實現教程

今天咱們來看一個很是有創意的CSS3 3D菜單，這個菜單的菜單項是能夠旋轉的長方體，鼠標滑過是長方體便可旋轉，看看下面的效果圖，是否是感受很是酷，我以爲這個菜單很適合用在我們開發人員的我的網站上。

固然你也能夠直接到這裏去查看這款菜單的DEMO演示。

接下來仍是分析一下這款CSS3菜單的源代碼吧，很簡單的HTML+CSS便可實現。

先來看看HTML代碼：

<nav>
  <ul>
    <li><a class="current" href="#" data-hover="Home">Home</a></li>
    <li><a href="#" data-hover="Blog">Blog</a></li>
    <li><a href="#" data-hover="About">About</a></li>
    <li><a href="#" data-hover="Contact">Contact</a></li>
  </ul>
</nav>

這個HTML佈局可謂是乾淨利落，很難看出來這會是一款超酷的3D菜單。

固然最重要的是CSS代碼，一塊兒來看看：

先是定義了一下菜單的總體外觀，包括文字的顏色和菜單的背景等等：

nav {
  background: #fff;
  margin: 15vh 2rem;
}
nav ul {
  list-style: none;
}
nav ul li {
  display: inline-block;
  text-transform: uppercase;
  font-size: 1.5rem;
  letter-spacing: 0.05rem;
}
nav ul li a {
  display: inline-block;
  padding: 1rem;
  color: #000;
  text-decoration: none;
  -webkit-transition: -webkit-transform 0.3s ease 0s;
  transition: transform 0.3s ease 0s;
  -webkit-transform-origin: 50% 0px 0px;
  -ms-transform-origin: 50% 0px 0px;
  transform-origin: 50% 0px 0px;
  -webkit-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
nav ul li a.current {
  color: #FF005B;
}

而後就是鼠標滑過菜單項實現的立方體翻轉效果了：

nav ul li a:hover {
  background: #fff;
  color: #000;
  -webkit-transform: rotateX(90deg) translateY(-22px);
  -ms-transform: rotateX(90deg) translateY(-22px);
  transform: rotateX(90deg) translateY(-22px);
}
nav ul li a::before {
  position: absolute;
  top: 100%;
  left: 0px;
  width: 100%;
  padding: 4px 0px;
  text-align: center;
  line-height: 50px;
  background: none repeat scroll 0% 0% #FF005B;
  color: #FFF;
  content: attr(data-hover);
  -webkit-transition: #6363CE 0.3s ease 0s;
  transition: #6363CE 0.3s ease 0s;
  -webkit-transform: rotateX(-90deg);
  -ms-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
  -webkit-transform-origin: 50% 0px 0px;
  -ms-transform-origin: 50% 0px 0px;
  transform-origin: 50% 0px 0px;
}

不難看出，咱們經過CSS3的transform的rotate屬性就能完成翻轉的動做，同時結合transition屬性來實現翻轉過程當中顏色的漸變更畫。

最後咱們把源代碼分享上來，下載地址>>