在互聯(lián)網(wǎng)的高速發(fā)展中我們接觸到更多新奇有趣的事物,那么 3D 特效這個名稱也是逐漸的在人們口中相互傳開了,那么對于怎么設(shè)置和實現(xiàn) 3D 效果可能還是有很多人不知道怎么實現(xiàn),那么今天我們就來看看有關(guān)于“如何在html中實現(xiàn)3D導(dǎo)航欄?”這個問題,下面是有關(guān)于實現(xiàn)的相關(guān)內(nèi)容,希望對大家有所幫助。
3D是three-dimensional的縮寫,就是三維圖形。在計算機里顯示3D圖形,就是說在平面里顯示三維圖形。不像現(xiàn)實世界里,真實的三維空間,有真實的距離空間。計算機里只是看起來很像真實世界,因此在計算機顯示的3D圖形,就是讓人眼看上就像真的一樣。人眼有一個特性就是近大遠小,就會形成立體感。
計算機屏幕是平面二維的,我們之所以能欣賞到真如實物般的三維圖像,是因為顯示在計算機屏幕上時色彩灰度的不同而使人眼產(chǎn)生視覺上的錯覺,而將二維的計算機屏幕感知為三維圖像。基于色彩學(xué)的有關(guān)知識,三維物體邊緣的凸出部分一般顯高亮度色,而凹下去的部分由于受光線的遮擋而顯暗色。這一認識被廣泛應(yīng)用于網(wǎng)頁或其他應(yīng)用中對按鈕、3D線條的繪制。比如要繪制的3D文字,即在原始位置顯示高亮度顏色,而在左下或右上等位置用低亮度顏色勾勒出其輪廓,這樣在視覺上便會產(chǎn)生3D文字的效果。具體實現(xiàn)時,可用完全一樣的字體在不同的位置分別繪制兩個不同顏色的2D文字,只要使兩個文字的坐標合適,就完全可以在視覺上產(chǎn)生出不同效果的3D文字。
案例
3D導(dǎo)航欄
效果:
<style> * { margin: 0; padding: 0; } ul { margin: 100px ; } ul li { width: 120px; height: 35px; list-style: none; perspective: 500px; float: left; margin: 0 5px; } .box { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: all .3s; } .box:hover{ transform: rotateX(90deg); } .front, .bottom { width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: flex; justify-content: center; align-items: center; } .front{ background-color: pink; transform: translateZ(17.5px); } .bottom{ background-color: teal; /* transform-origin: center bottom; */ transform:translateY(17.5px) rotateX(-90deg); } </style> <body> <ul> <li> <div class="box"> <div class="front">天</div> <div class="bottom">地</div> </div> </li> <li> <div class="box"> <div class="front">天</div> <div class="bottom">地</div> </div> </li> ... </ul> </body>
那么以上就是有關(guān)于“如何在html中實現(xiàn)3D導(dǎo)航欄?實現(xiàn)3D導(dǎo)航欄的示例代碼!”這個問題的代碼和相關(guān)內(nèi)容,當然更多有關(guān)于 HTML 的使用我們都可以在 W3Cschool中進行學(xué)習(xí)和了解更多的相關(guān)內(nèi)容。