ホームページ >ウェブフロントエンド >htmlチュートリアル >CSS3 は 3D ナビゲーションを作成します_html/css_WEB-ITnose
効果プレビュー
分析: ホバリング時に表と裏が反転し、膨らみ効果があることがわかります。
コードは次のとおりです:
<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>
3499910bf9dac5ae3c52d5ede7383485 タグは 1 つの 45a2772a6b6107b401db3c9b82c049c2 で囲まれ、ボックスはエフェクトの前後を準備します。
CSS 分析コードは次のとおりです:
*{ 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; }
まず 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の高さは3499910bf9dac5ae3c52d5ede7383485の半分になり、アニメーション中に下から上がってくる影響がなくなるので、最初に回転Xをして座標を変更してから行う必要があります。次に、translateZ を実行して、.back が ul の「下」にあるようにします。
うわーホバーがない場合、.front,.back、.front、.backのtranslateZを設定しているため、通常の3499910bf9dac5ae3c52d5ede7383485よりも大きく見えます。ホバーなしで .front が 3499910bf9dac5ae3c52d5ede7383485 に収まるように、.three-d に translationZ(-50px) を設定します。これにより、.front が最初に .three-d に続きますが、Z 軸には -50px のマイナスが存在します。このように、3499910bf9dac5ae3c52d5ede7383485.
.three-d-box{transform:translateZ(-50px);}
に適合します。最後に、この変更にトランジション効果を追加します:
.three-d-box{transition:all .3s;}
効果を明確にするために、Z 軸上の変位が設定されています。値は 50px です。原理を理解した後、下の .back が目立たなくなるように、より小さいディスプレイスメント値を設定できます。
ホバーリングすると、.three-d-box が回転し、その子要素の回転の中心点は、子要素自体の中心点ではなく、.three-d-box の中心点になります~ この方法膨らみ効果が見られます。
ホバリングすると元のスタイルが上書きされるので、ホバリング時は元の状態の .three-d-box の Z 軸上の変位は 0、.front と .back の Z 軸上の変位は 0 になります。軸はホバーの場合は 50 ピクセルです。これを変換の開始点として使用します。
最終的な 3D 関連コードは次のとおりです:
概要この例はよく示しています。 変換の中心点に必ず注意してください 。
親要素が変形されるとき、子要素はそれ自体ではなく、親要素の中心点を中心点として使用して変形されます。