主頁 > 知識庫 > 使用HTML+Css+transform實現(xiàn)3D導航欄的示例代碼

使用HTML+Css+transform實現(xiàn)3D導航欄的示例代碼

熱門標簽:西安金倫外呼系統(tǒng) 地圖標注員工作內(nèi)容 中國地圖標注城市的 智能語音電銷機器人客戶端 地圖標注沿海城市房價 通遼地圖標注app 高德地圖標注廁所 威海語音外呼系統(tǒng)平臺 江西ai電銷機器人如何

3D是three-dimensional的縮寫,就是三維圖形。在計算機里顯示3D圖形,就是說在平面里顯示三維圖形。不像現(xiàn)實世界里,真實的三維空間,有真實的距離空間。計算機里只是看起來很像真實世界,因此在計算機顯示的3D圖形,就是讓人眼看上就像真的一樣。人眼有一個特性就是近大遠小,就會形成立體感。

計算機屏幕是平面二維的,我們之所以能欣賞到真如實物般的三維圖像,是因為顯示在計算機屏幕上時色彩灰度的不同而使人眼產(chǎn)生視覺上的錯覺,而將二維的計算機屏幕感知為三維圖像。基于色彩學的有關(guān)知識,三維物體邊緣的凸出部分一般顯高亮度色,而凹下去的部分由于受光線的遮擋而顯暗色。這一認識被廣泛應(yīng)用于網(wǎng)頁或其他應(yīng)用中對按鈕、3D線條的繪制。比如要繪制的3D文字,即在原始位置顯示高亮度顏色,而在左下或右上等位置用低亮度顏色勾勒出其輪廓,這樣在視覺上便會產(chǎn)生3D文字的效果。具體實現(xiàn)時,可用完全一樣的字體在不同的位置分別繪制兩個不同顏色的2D文字,只要使兩個文字的坐標合適,就完全可以在視覺上產(chǎn)生出不同效果的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>

到此這篇關(guān)于使用HTML+Css+transform實現(xiàn)3D導航欄的示例代碼的文章就介紹到這了,更多相關(guān)HTML transform實現(xiàn)3D導航欄內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!

標簽:營口 晉中 河池 眉山 青海 北海 崇左 阜陽

巨人網(wǎng)絡(luò)通訊聲明:本文標題《使用HTML+Css+transform實現(xiàn)3D導航欄的示例代碼》,本文關(guān)鍵詞  使用,HTML+Css+transform,實現(xiàn),;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請?zhí)峁┫嚓P(guān)信息告之我們,我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《使用HTML+Css+transform實現(xiàn)3D導航欄的示例代碼》相關(guān)的同類信息!
  • 本頁收集關(guān)于使用HTML+Css+transform實現(xiàn)3D導航欄的示例代碼的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章