溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“怎么在html中實現3D導航欄”，在日常操作中，相信很多人在怎么在html中實現3D導航欄問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”怎么在html中實現3D導航欄”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
3D是three-dimensional的縮寫，就是三維圖形。在計算機里顯示3D圖形，就是說在平面里顯示三維圖形。不像現實世界里，真實的三維空間，有真實的距離空間。計算機里只是看起來很像真實世界，因此在計算機顯示的3D圖形，就是讓人眼看上就像真的一樣。人眼有一個特性就是近大遠小，就會形成立體感。
計算機屏幕是平面二維的，我們之所以能欣賞到真如實物般的三維圖像，是因為顯示在計算機屏幕上時色彩灰度的不同而使人眼產生視覺上的錯覺，而將二維的計算機屏幕感知為三維圖像。基于色彩學的有關知識，三維物體邊緣的凸出部分一般顯高亮度色，而凹下去的部分由于受光線的遮擋而顯暗色。這一認識被廣泛應用于網頁或其他應用中對按鈕、3D線條的繪制。比如要繪制的3D文字，即在原始位置顯示高亮度顏色，而在左下或右上等位置用低亮度顏色勾勒出其輪廓，這樣在視覺上便會產生3D文字的效果。具體實現時，可用完全一樣的字體在不同的位置分別繪制兩個不同顏色的2D文字，只要使兩個文字的坐標合適，就完全可以在視覺上產生出不同效果的3D文字。
案例
3D導航欄
代碼：
<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>到此，關于“怎么在html中實現3D導航欄”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
