純CSS實現菜單、導航欄的3D翻轉動畫效果
發(fā)布時間：2014-04-23 16:38:23 作者：佚名 
我要評論
我要評論隨著瀏覽器技術的進步，CSS動畫技術已經不是只那些簡單的淡入淡出效果或幻燈片效果，它們能做很多更強大的事情
我曾經向大家展示過閃光的logo，燃燒的火狐貍，多重嵌套動畫等例子，今天，我們將要制作一個簡單但非?？岬?D翻轉菜單。大家可以先看看實際效果，下面有效果截圖。
效果圖：
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動畫….一種我們web程序員都應該感謝的技術。
相關文章
使用HTML+Css+transform實現3D導航欄的示例代碼
這篇文章主要介紹了使用HTML+Css+transform實現3D導航欄的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著2021-03-31