怎么用純CSS實現菜單、導航欄的3D翻轉動畫效果

這篇文章主要講解了“怎么用純CSS實現菜單、導航欄的3D翻轉動畫效果”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“怎么用純CSS實現菜單、導航欄的3D翻轉動畫效果”吧！

我曾經向大家展示過閃光的logo，燃燒的火狐貍，多重嵌套動畫等例子，今天，我們將要制作一個簡單但非常酷的3D翻轉菜單。大家可以先看看實際效果，下面有效果截圖。

效果圖：

HTML代碼

HTML內容是一些用作菜單的鏈接，我們在里面添加了一些額外的SPAN標記來幫助實現3D效果：

代碼如下:

<ul class="block-menu lazy ">
<li><a href="/" class="three-d lazy ">
 Home
 <span aria-hidden="true" class="three-d-box lazy ">
  <span class="front lazy ">Home</span>
  <span class="back lazy ">Home</span>
 </span>
</a></li>
<li><a href="/demos" class="three-d lazy ">
 Demos
 <span aria-hidden="true" class="three-d-box lazy ">
  <span class="front lazy ">Demos</span>
  <span class="back lazy ">Demos</span>
 </span>
</a></li>
<!-- more items here -->
</ul>

在A鏈接標記旁邊是一系列的SPAN元素，動畫演示過程中，它將用來表現3D立方體的“正面”和“背面”。這些SPAN里的文字和A鏈接里的文字是一致的。

CSS代碼

這個動畫的過程就是實現3D變換和元素位置變化。但實際上A鏈接是沒有移動的，動的是SPAN標簽，而且是最外層的SPAN標簽，內部的SPAN標簽被初始化在它的位置上，以后就不做任何變動。每個元素都可以向上翻，并要翻回來，我們使用的是CSS transforms。

代碼如下:

/* basic menu styles */
.block-menu {
display: block;
background: #000;
}</p> <p>.block-menu li {
display: inline-block;
}
.block-menu li a {
color: #fff;
display: block;
text-decoration: none;
font-family: 'Passion One', Arial, sans-serif;
font-smoothing: antialiased;
text-transform: uppercase;
overflow: visible;
line-height: 20px;
font-size: 24px;
padding: 15px 10px;
}
/* animation domination */
.three-d {
perspective: 200px;
transition: all .07s linear;
position: relative;
cursor: pointer;
}
/* complete the animation! */
.three-d:hover .three-d-box,
.three-d:focus .three-d-box {
 transform: translateZ(-25px) rotateX(90deg);
}
.three-d-box {
transition: all .3s ease-out;
transform: translatez(-25px);
transform-style: preserve-3d;
pointer-events: none;
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
}
/*
put the "front" and "back" elements into place with CSS transforms,
specifically translation and translatez
*/
.front {
transform: rotatex(0deg) translatez(25px);
}
.back {
transform: rotatex(-90deg) translatez(25px);
color: #ffe7c4;
}
.front, .back {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: black;
padding: 15px 10px;
color: white;
pointer-events: none;
box-sizing: border-box;
}

如果你想看看正面和反面各自是如何旋轉移動的，我強烈推薦你們試一下，將其中的一個設置為display: none，讓鼠標懸停在它們上面，你將會看到它們各自將完成整個動畫的哪一部分動作。

這種實現方式的唯一的缺點是有重復的菜單名稱，雖然技術上是隱藏看不出來的，但從代碼質量上說存在代碼重復問題。然而，從視覺效果上看，它的動畫非常順滑，毫無瑕疵。沒有JavaScript，Flash或canvas技術，只是一些簡單的CSS標記，這技術CSS動畫&hellip;.一種我們web程序員都應該感謝的技術。

感謝各位的閱讀，以上就是“怎么用純CSS實現菜單、導航欄的3D翻轉動畫效果”的內容了，經過本文的學習后，相信大家對怎么用純CSS實現菜單、導航欄的3D翻轉動畫效果這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！