純CSS實(shí)現(xiàn)菜單、導(dǎo)航欄的3D翻轉(zhuǎn)動(dòng)畫效果
發(fā)布時(shí)間：2014-04-23 16:38:23 作者：佚名 
我要評(píng)論
我要評(píng)論隨著瀏覽器技術(shù)的進(jìn)步，CSS動(dòng)畫技術(shù)已經(jīng)不是只那些簡(jiǎn)單的淡入淡出效果或幻燈片效果，它們能做很多更強(qiáng)大的事情
我曾經(jīng)向大家展示過(guò)閃光的logo，燃燒的火狐貍，多重嵌套動(dòng)畫等例子，今天，我們將要制作一個(gè)簡(jiǎn)單但非?？岬?D翻轉(zhuǎn)菜單。大家可以先看看實(shí)際效果，下面有效果截圖。
效果圖：
HTML代碼
HTML內(nèi)容是一些用作菜單的鏈接，我們?cè)诶锩嫣砑恿艘恍╊~外的SPAN標(biāo)記來(lái)幫助實(shí)現(xiàn)3D效果：
復(fù)制代碼
代碼如下:<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鏈接標(biāo)記旁邊是一系列的SPAN元素，動(dòng)畫演示過(guò)程中，它將用來(lái)表現(xiàn)3D立方體的“正面”和“背面”。這些SPAN里的文字和A鏈接里的文字是一致的。
CSS代碼
這個(gè)動(dòng)畫的過(guò)程就是實(shí)現(xiàn)3D變換和元素位置變化。但實(shí)際上A鏈接是沒(méi)有移動(dòng)的，動(dòng)的是SPAN標(biāo)簽，而且是最外層的SPAN標(biāo)簽，內(nèi)部的SPAN標(biāo)簽被初始化在它的位置上，以后就不做任何變動(dòng)。每個(gè)元素都可以向上翻，并要翻回來(lái)，我們使用的是CSS transforms。
復(fù)制代碼
代碼如下:/* 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;
}
如果你想看看正面和反面各自是如何旋轉(zhuǎn)移動(dòng)的，我強(qiáng)烈推薦你們?cè)囈幌?，將其中的一個(gè)設(shè)置為display: none，讓鼠標(biāo)懸停在它們上面，你將會(huì)看到它們各自將完成整個(gè)動(dòng)畫的哪一部分動(dòng)作。
這種實(shí)現(xiàn)方式的唯一的缺點(diǎn)是有重復(fù)的菜單名稱，雖然技術(shù)上是隱藏看不出來(lái)的，但從代碼質(zhì)量上說(shuō)存在代碼重復(fù)問(wèn)題。然而，從視覺(jué)效果上看，它的動(dòng)畫非常順滑，毫無(wú)瑕疵。沒(méi)有JavaScript，F(xiàn)lash或canvas技術(shù)，只是一些簡(jiǎn)單的CSS標(biāo)記，這技術(shù)CSS動(dòng)畫….一種我們web程序員都應(yīng)該感謝的技術(shù)。
相關(guān)文章
使用HTML+Css+transform實(shí)現(xiàn)3D導(dǎo)航欄的示例代碼
這篇文章主要介紹了使用HTML+Css+transform實(shí)現(xiàn)3D導(dǎo)航欄的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著2021-03-31