MaterialsEN中文ホームブログ技術ブログHTMLとCSSで操作可能な三次元図形を作るHTMLとCSSで操作可能な三次元図形を作る作成日:2017/09/15更新日:2018/07/06技術ブログフロントエンドCSSHTMLこんにちは。システムデザイン部の阿部です。今回は、CSSのtransformプロパティを活用し、HTMLとCSSのみによる三次元図形の作成とその操作を行ってみました。各Λをクリックすることでそれぞれの方向に動き、中央の○をクリックすることで初期表示に戻ります。CodePen.以下のように手順を解説いたします。要素の変形を行うCSSのtransformプロパティは、X軸方向、Y軸方向といった二次元的な変形に加え、Z軸方向への三次元的な変形を行うことができます。このプロパティによって変形させた要素を面として組み合わせると、三次元的な図形を作成することができます。作成にあたっては、以下の関数をメインに使用します。rotateX()→要素をX軸を中心として指定の角度に回転させるrotateY()→要素をY軸を中心として指定の角度に回転させるrotateZ()→要素をZ軸を中心として指定の角度に回転させるtranslateX()→要素をX軸方向へ指定の距離分移動させるtranslateY()→要素をY軸方向へ指定の距離分移動させるtranslateZ()→要素をZ軸方向へ指定の距離分移動させるまた、要素を入れ子にするため、以下のプロパティを使い、子孫要素に対しても三次元的な描画を摘要できるようにします。preserve-3d→指定した要素の子孫要素に対しても三次元的な描画を行うtransformプロパティは3次元的な変形を行う場合、以下のブラウザに対応します。preserve-3dプロパティがIEに対応していないため、それ以外の対応ブラウザでの閲覧をお願いいたします。2.変形した要素で立方体を作るそれでは、正方形の形をとった要素を組み合わせ、立方体を作成してみましょう。transformプロパティの、要素を回転させるrotate関数と、要素を移動させるtranslate関数を組み合わせます。2.1.面の作成まずは面となるdiv要素を6面分作成します。後に各面を一括で操作できるよう、ここでは各面を.cubeの子要素として配置します。次に、positionプロパティで位置を指定し、作成した6面を重ねます。preserve-3dを指定し.cubeの子要素となる各面を三次元的に展開できるようにします。ついでに、少し色を透過しておきます。CodePen.これで立方体作成の準備が整いました。それぞれY軸、X軸を中心に回転させ、それを移動させますこれで立方体が完成します。translateZ(100px);}そのままでは分かりづらいので、立方体に以下を指定してやや回転させた結果がこちらです。擬似クラスのcheckedを活用することにより、HTMLとCSSのみで実現することができます。ここでは、上下左右、正面のボタンを作成し、立方体をそれぞれの方向に動かしてみます。3.1.ボタンの作成まずはラジオボタンとその操作を行うそれっぽい見た目のラベルを立方体の手前に配置します。CodePen.3.2.各ボタンに回転のアニメーションを設定するそれぞれがチェックされた際の回転方向を指定します。ここでは、各矢印をクリックしたらそれぞれの方向に90度回転、中央の丸をクリックすると初期表示に戻るようにします。rotateY(90deg);}また、.cubeにtransitionを指定し、これらの回転を滑らかに行えるようにします。1s;}これで、立方体を操作できるようになりました!改めて完成図を貼ってみます。CodePen.4.おわりにいかがでしたでしょうか。全てのブラウザに対応しているわけではないので、業務レベルで使えるかどうかは微妙なところですが、CSSだけで三次元図形を軽快に操作ができるのは驚きですね。今回メインで使用したtransformプロパティは、使いこなすとCSSだけでも様々な表現ができます。MaterialsEN。