CSS3_html/css_WEB-ITnose で 3D キューブを作成する

はじめに: 今日は 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>

CSS 分析

1. 外観

立方体の各面に異なる色を設定し、フォントを設定します。
コードは次のとおりです:

    #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 ); }

2. 配置

#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;    }

3. 3D 効果

まず第一に、頭の中に 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 変換の紹介