BinaryDevelop
  1. ホーム
  2. Web制作
  3. html5

HTML+Css+transformを使った3Dナビゲーションバーのサンプルコード

2022-01-21 01:28:40

3Dはthree-dimensionalの略で、立体的なグラフィックスという意味です。コンピュータで3Dグラフィックスを表示するということは、平面で3Dグラフィックスを表示するということです。現実世界と違って、本当の3次元空間は、現実の距離空間があります。コンピューターは現実の世界にしか見えないので、コンピューターで表示する3Dグラフィックスは、人間の目で見て本物に見えるようにすることなのです。人間の目の特徴として、近くは大きく、遠くは小さいというのがあり、それが立体感を生んでいます。

パソコンの画面は平面で2次元なのに、本物のように立体的な映像を楽しめるのは、パソコンの画面に表示したときの色の濃淡の違いによって、人間の目が錯覚を起こし、2次元のパソコン画面を3次元の映像として認識してしまうからだそうです。色彩学の知見に基づけば、一般的な高輝度色の突出した部分の立体物のエッジは、光を遮断して暗い色のために凹んだ部分となる。この理解は、広くWebページや他のアプリケーションでボタンや3Dラインを描画するために使用されています。たとえば、3Dテキストは、元の位置で、高輝度色を表示することであり、低輝度色の輪郭と左下または右上の位置で、視覚効果でそのように3Dテキストの効果を生成する描画されます。これは、全く同じフォントで異なる位置に2色の2Dテキストを描画し、2つのテキストの座標を適切にすることによって達成することができ、それは異なる視覚効果で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">day</div>
        <div class="bottom">ground</div>
      </div>
    </li>
    <li>
      <div class="box">
        <div class="front">day</div>
        <div class="bottom">ground</div>
      </div>
    </li>
 ...
  </ul>
</body>

3Dナビゲーションバーコードを達成するためにHTML + CSS + 変換を使用することについて、この記事は、このに導入され、3Dナビゲーションバーの内容を達成するために、より関連するHTML変換スクリプト家の前の記事を検索してくださいまたは次の関連記事を閲覧し続け、私はあなたが将来的にもっとスクリプト家をサポートすることを願っています！.

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します