怎么在html中實(shí)現(xiàn)3D導(dǎo)航欄

發(fā)布時(shí)間：2022-02-22 15:27:42 來(lái)源：億速云閱讀：217 作者：iii 欄目：開(kāi)發(fā)技術(shù)

這篇文章主要介紹“怎么在html中實(shí)現(xiàn)3D導(dǎo)航欄”，在日常操作中，相信很多人在怎么在html中實(shí)現(xiàn)3D導(dǎo)航欄問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”怎么在html中實(shí)現(xiàn)3D導(dǎo)航欄”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

3D是three-dimensional的縮寫(xiě)，就是三維圖形。在計(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)生視覺(jué)上的錯(cuò)覺(jué)，而將二維的計(jì)算機(jī)屏幕感知為三維圖像?；谏蕦W(xué)的有關(guān)知識(shí)，三維物體邊緣的凸出部分一般顯高亮度色，而凹下去的部分由于受光線的遮擋而顯暗色。這一認(rèn)識(shí)被廣泛應(yīng)用于網(wǎng)頁(yè)或其他應(yīng)用中對(duì)按鈕、3D線條的繪制。比如要繪制的3D文字，即在原始位置顯示高亮度顏色，而在左下或右上等位置用低亮度顏色勾勒出其輪廓，這樣在視覺(jué)上便會(huì)產(chǎn)生3D文字的效果。具體實(shí)現(xiàn)時(shí)，可用完全一樣的字體在不同的位置分別繪制兩個(gè)不同顏色的2D文字，只要使兩個(gè)文字的坐標(biāo)合適，就完全可以在視覺(jué)上產(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)航欄”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！

向AI問(wèn)一下細(xì)節(jié)

怎么在html中實(shí)現(xiàn)3D導(dǎo)航欄

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽