はじめに: 今日は css3 を使用して立方体を実現します。この事例を通じて、3D 効果を実現する際の css3 の特性をある程度理解することができます。
ケース効果 HTML 分析一番外側の .container は 3D 効果をトリガーし、#cube は立方体の 6 つの面をラップしながら親要素の 3D 空間を保持し、各面に対応するクラス属性を設定します。
HTML コードは次のとおりです:
<section class="container"> <div id="cube"> <figure class="front">1</figure> <figure class="back">2</figure> <figure class="right">3</figure> <figure class="left">4</figure> <figure class="top">5</figure> <figure class="bottom">6</figure> </div></section>
立方体の各面に異なる色を設定し、フォントを設定します。
コードは次のとおりです:
#cube figure{ font-size: 120px; line-height: 196px; font-weight: bold; color: white; text-align: center; } .front { background: hsla( 0, 100%, 50%, 0.5 ); } .back { background: hsla( 60, 100%, 50%, 0.5 ); } .right { background: hsla( 120, 100%, 50%, 0.5 ); } .left { background: hsla( 180, 100%, 50%, 0.5 ); } .top { background: hsla( 240, 100%, 50%, 0.5 ); } .bottom { background: hsla( 300, 100%, 50%, 0.5 ); }#cube とそのラップされたサブ要素 Figure は、最も外側の .container を基準にして絶対的に配置され、.figure は 2px の境界線を与えます。
コードは次のとおりです:
.container{ width: 200px; height: 200px; position: relative; } #cube{ width: 100%;/*让#cube与.container的transform-origin一样*/ height: 100%; position: absolute; } #cube figure{ width: 196px; height: 196px; border:2px solid black; position: absolute; } まず第一に、頭の中に 3D 座標系を用意する必要があります
平たく言えば、Z 軸はコンピューター画面に垂直な軸であり、正の方向はコンピューターの正面を指します。X 軸は左右、Y 軸は上下です。
(1) 関連する属性の紹介:
transform 関連関数:
rotate: 特定の軸の周りを回転します。たとえば、rotateY(30deg) は、Y 軸の周りを 30 度回転することを意味します。正の値は時計回りに、負の値は反時計回りに回転します。
翻訳: 特定の軸上の変位。 translationZ(10px) は、Z 軸の正の方向への 10px の変位です。これは、元の座標では、要素が手前に 10px 変位し、手前に 10px 近づくことを意味します。
3D 属性
視点: 3D 空間で作成する、値が小さいほど要素の深さが増し、3D 効果がより明白になります。親要素に設定する必要があります。
transform-style: flat と prepare-3d の 2 つの値があります。 flat は 2D 平面、preserve-3d は親要素によって作成された 3D 空間です。 flat はデフォルト値です。
詳細については、以下を参照してください:
mdn
w3cplus
もちろん、最良の方法は、属性を 1 つずつ試すことです。エフェクトをリアルタイムで表示するには、オンライン エディタを使用するのが最善です。例えば jsbin
(2) 効果分析
まず、3D 空間を作成し、親要素が作成した 3D 空間を子要素に使用させる必要があります。
.container{perspective:1000px;}#cube{transform-style:preserve-3d;}3D 空間を作成した後、上で学習した変換関連の関数効果に基づいて、右側に焦点を当てた分析を実行します。他のサーフェスも同じ考え方を使用して作成できます。
右側については、まずY軸を中心に90度回転させます。このとき、右側が正面を中心に垂直になるようにします。次に、.right を .front の半分の距離、つまり 100px だけ右に移動する必要があります。
注意:
このとき、translateX(100px)と書くと、右側が内側に移動することがわかります。これは、 回転後、座標系は回転に追従します つまり、.right が Y 軸を中心に 90 度回転すると、このとき .right の Z 軸も 90 度回転します。右が私たちを追いかけてきました。私は「右」に行きました（この説明が理解できるかわかりませんが...）。
そのため、.right を「右」に 100px 移動するには、translateZ(100px) を使用する必要があります。
要素とともに座標軸が回転するため、記述する際には transform 関数の記述順序に注意する必要があります。最初に Z(100px) を移動し、次に Y(90 度) 回転して、効果が同じかどうかを確認できます。
同様に、他の側面もこの考え方に基づいて分析できます。
コードは以下の通りです:
.front{transform:rotateY(0deg) translateZ(100px);}.back{transform:rotateX(180deg) translateZ(100px);}.right{ transform:rotateY(90deg) translateZ(100px);}.left{transform:rotateY(-90deg) translateZ(100px);}.top{transform:rotateX(90deg) translateZ(100px);}.bottom{transform:rotateX(-90deg) translateZ(100px);}このようにして、CSS3を使用して作成した立方体が実現されます。
#cube の上にマウスを置くと、フィギュアが 3D 変化します。
そうです最後に、この変換にトランジション効果を与えます
#cube Figure{transition:all 1s;}
このようにして、効果が達成されました。
直方体を実装するときは、異なる面の異なる幅、高さ、変位に注意を払う必要があります。
HTML コードは次のとおりです:
#cube:hover .front{transform:rotateY(0deg) translateZ(100px);} #cube:hover .back{transform:rotateX(180deg) translateZ(100px);} #cube:hover .right{ transform:rotateY(90deg) translateZ(100px);} #cube:hover .left{transform:rotateY(-90deg) translateZ(100px);} #cube:hover .top{transform:rotateX(90deg) translateZ(100px);} #cube:hover .bottom{transform:rotateX(-90deg) translateZ(100px);}CSS コードは次のとおりです:
<section class="container"> <div id="box"> <figure class="front">1</figure> <figure class="back">2</figure> <figure class="right">3</figure> <figure class="left">4</figure> <figure class="top">5</figure> <figure class="bottom">6</figure> </div></section>
実際、これを実装することによる最大の利点は、座標軸が変更される、座標軸が変更される、座標軸が変化し、変形する いくつかの関数の効果。したがって、transform関数の記述順序には必ず注意してください。
参考資料mdn
w3cplus
CSS 3D 変換の紹介
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
