在互聯(lián)網(wǎng)的高速發(fā)展中我們接觸到更多新奇有趣的事物，那么 3D 特效這個(gè)名稱也是逐漸的在人們口中相互傳開了，那么對(duì)于怎么設(shè)置和實(shí)現(xiàn) 3D 效果可能還是有很多人不知道怎么實(shí)現(xiàn)，那么今天我們就來(lái)看看有關(guān)于“如何在html中實(shí)現(xiàn)3D導(dǎo)航欄？”這個(gè)問題，下面是有關(guān)于實(shí)現(xiàn)的相關(guān)內(nèi)容，希望對(duì)大家有所幫助。
3D是three-dimensional的縮寫，就是三維圖形。在計(jì)算機(jī)里顯示3D圖形，就是說(shuō)在平面里顯示三維圖形。不像現(xiàn)實(shí)世界里，真實(shí)的三維空間，有真實(shí)的距離空間。計(jì)算機(jī)里只是看起來(lái)很像真實(shí)世界，因此在計(jì)算機(jī)顯示的3D圖形，就是讓人眼看上就像真的一樣。人眼有一個(gè)特性就是近大遠(yuǎn)小，就會(huì)形成立體感。
計(jì)算機(jī)屏幕是平面二維的，我們之所以能欣賞到真如實(shí)物般的三維圖像，是因?yàn)轱@示在計(jì)算機(jī)屏幕上時(shí)色彩灰度的不同而使人眼產(chǎn)生視覺上的錯(cuò)覺，而將二維的計(jì)算機(jī)屏幕感知為三維圖像?；谏蕦W(xué)的有關(guān)知識(shí)，三維物體邊緣的凸出部分一般顯高亮度色，而凹下去的部分由于受光線的遮擋而顯暗色。這一認(rèn)識(shí)被廣泛應(yīng)用于網(wǎng)頁(yè)或其他應(yīng)用中對(duì)按鈕、3D線條的繪制。比如要繪制的3D文字，即在原始位置顯示高亮度顏色，而在左下或右上等位置用低亮度顏色勾勒出其輪廓，這樣在視覺上便會(huì)產(chǎn)生3D文字的效果。具體實(shí)現(xiàn)時(shí)，可用完全一樣的字體在不同的位置分別繪制兩個(gè)不同顏色的2D文字，只要使兩個(gè)文字的坐標(biāo)合適，就完全可以在視覺上產(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中實(shí)現(xiàn)3D導(dǎo)航欄？實(shí)現(xiàn)3D導(dǎo)航欄的示例代碼！”這個(gè)問題的代碼和相關(guān)內(nèi)容，當(dāng)然更多有關(guān)于 HTML 的使用我們都可以在 W3Cschool中進(jìn)行學(xué)習(xí)和了解更多的相關(guān)內(nèi)容。
