CSS3 は 3D ナビゲーションを作成します_html/css_WEB-ITnose

効果プレビュー

分析: ホバリング時に表と裏が反転し、膨らみ効果があることがわかります。

HTML 分析

コードは次のとおりです:

<ul class="block-menu">    <li>        <a href="#" class="three-d">            Home            <span class="three-d-box">                <span class="front">Home</span>                <span class="back">Home</span>            </span>        </a>    </li>    <li>        <a href="#" class="three-d">            Demo            <span class="three-d-box">                <span class="front">Demo</span>                <span class="back">Demo</span>            </span>        </a>    </li>    <li>        <a href="#" class="three-d">            Deal            <span class="three-d-box">                <span class="front">Deal</span>                <span class="back">Deal</span>            </span>        </a>    </li>    <li>        <a href="#" class="three-d">            About            <span class="three-d-box">                <span class="front">About</span>                <span class="back">About</span>            </span>        </a>    </li></ul>

タグは 1 つの で囲まれ、ボックスはエフェクトの前後を準備します。

CSS 分析

1. 外観、配置

コードは次のとおりです:

        *{  box-sizing:border-box;}        .block-menu{background:black;}        .block-menu li{display:inline-block;}        .block-menu li a{          color:#fff;          text-decoration:none;          text-transform:uppercase;          font-size:24px;          line-height:20px;          font-weight:bold;          font-family: Arial, sans-serif;          display:block;          padding:15px 10px;        }        .three-d{          position:relative;        }        .three-d-box,.front,.back{          width:100%;          height:100%;          position:absolute;          top:0;          left:0;          padding:15px 10px;          background:black;        }

2.3D 効果

まず 3D 環境を作成し、3D 空間を保持します:

.three-d{perspective:200px;}.three-d-box{transform-style:preserve-3d;}

1. three-d:hover 中に、 .three- d-box が回転し、正面の要素が上に反転し、下の要素が上に反転され、反転すると膨らみが生じます。
2. このはみ出し効果については、要素を中心点として反転すると、はみ出し効果は発生しません。したがって、膨らみ効果を作成したい場合は、反転された要素の中心がそれ自体の中心であってはなりません。
3. 同時に、反転中に要素が ul が配置されている平面に貼り付けられるため、Z 軸上に一定の負の変位があることがわかります。

上記の 3 つのポイントに従って、3D 変換を設定できます。

.three-d:hover .three-d-box{    transform:translateZ(-50px) rotateX(90deg);}

ここでは、rotateX を最初に使用してから、translateZ を使用すると、座標軸が変換されるため、最初に、rotateX の代わりに、translateZ を設定します。 Z 軸は垂直ではありません。UL 平面 (こちら側を向いている) での変位です。

変換中の .three-d-box の Z 軸上の負の変位のため、Z 軸上の変位が .front と .back に設定されていない場合、これら 2 つの平面は元にアタッチされません。最後にulの飛行機です。ul飛行機の後ろにあります。したがって、.front と .back を、変更時の変位に等しい Z 軸の正方向の距離に設定します。このように、変更すると、これら 2 つの要素は ul が位置する平面に完全にフィットします。

うわー

変形すると、.backが下から出てきて、rotateX(-90deg)の回転があるはずです。先に平行移動Zをしてから回転Xをすると、Y軸上の.backの高さはの半分になり、アニメーション中に下から上がってくる影響がなくなるので、最初に回転Xをして座標を変更してから行う必要があります。次に、translateZ を実行して、.back が ul の「下」にあるようにします。

うわー

ホバーがない場合、.front,.back、.front、.backのtranslateZを設定しているため、通常のよりも大きく見えます。ホバーなしで .front が に収まるように、.three-d に translationZ(-50px) を設定します。これにより、.front が最初に .three-d に続きますが、Z 軸には -50px のマイナスが存在します。このように、.
.three-d-box{transform:translateZ(-50px);}

に適合します。最後に、この変更にトランジション効果を追加します:
.three-d-box{transition:all .3s;}

3. 注:

効果を明確にするために、Z 軸上の変位が設定されています。値は 50px です。原理を理解した後、下の .back が目立たなくなるように、より小さいディスプレイスメント値を設定できます。

ホバーリングすると、.three-d-box が回転し、その子要素の回転の中心点は、子要素自体の中心点ではなく、.three-d-box の中心点になります~ この方法膨らみ効果が見られます。

ホバリングすると元のスタイルが上書きされるので、ホバリング時は元の状態の .three-d-box の Z 軸上の変位は 0、.front と .back の Z 軸上の変位は 0 になります。軸はホバーの場合は 50 ピクセルです。これを変換の開始点として使用します。

最終的な 3D 関連コードは次のとおりです:

概要

この例はよく示しています。 変換の中心点に必ず注意してください 。

親要素が変形されるとき、子要素はそれ自体ではなく、親要素の中心点を中心点として使用して変形されます。