こんにちは。キャスレーコンサルティング システムデザイン部の阿部です。

今回は、CSSのtransformプロパティを活用し、HTMLとCSSのみによる三次元図形の作成とその操作を行ってみました。

まずは完成図です。
各Λをクリックすることでそれぞれの方向に動き、中央の○をクリックすることで初期表示に戻ります。

See the Pen cube_5 by s-ta/w (@w_s-ta) on CodePen.

以下のように手順を解説いたします。

1.transformプロパティによる要素の変形
2.変形した要素で立方体を作る

  • 2.1.面の作成
  • 2.2.面の基準を指定
  • 2.3.各面を回転させる

3.ラベルとラジオボタンで立方体を動かす

  • 3.1.ボタンの作成
  • 3.2.各ボタンに回転のアニメーションを設定する

4.おわりに

1.transformプロパティによる要素の変形

要素の変形を行うCSSのtransformプロパティは、X軸方向、Y軸方向といった二次元的な変形に加え、
Z軸方向への三次元的な変形を行うことができます。

このプロパティによって変形させた要素を面として組み合わせると、三次元的な図形を作成することができます。

作成にあたっては、以下の関数をメインに使用します。

rotateX()
→要素をX軸を中心として指定の角度に回転させる
rotateY()
→要素をY軸を中心として指定の角度に回転させる
rotateZ()
→要素をZ軸を中心として指定の角度に回転させる

translateX()
→要素をX軸方向へ指定の距離分移動させる
translateY()
→要素をY軸方向へ指定の距離分移動させる
translateZ()
→要素をZ軸方向へ指定の距離分移動させる

また、要素を入れ子にするため、以下のプロパティを使い、子孫要素に対しても三次元的な描画を摘要できるようにします。

transform-style: preserve-3d
→指定した要素の子孫要素に対しても三次元的な描画を行う

transformプロパティは3次元的な変形を行う場合、以下のブラウザに対応します。

SnapCrab_NoName_2017-9-12_19-28-27_No-00
参考：caniuse.com

今回使用するtransform-style: preserve-3dプロパティがIEに対応していないため、
それ以外の対応ブラウザでの閲覧をお願いいたします。

2.変形した要素で立方体を作る

それでは、正方形の形をとった要素を組み合わせ、立方体を作成してみましょう。
transformプロパティの、要素を回転させるrotate関数と、要素を移動させるtranslate関数を組み合わせます。

2.1.面の作成

まずは面となるdiv要素を6面分作成します。
後に各面を一括で操作できるよう、ここでは各面を.cubeの子要素として配置します。

See the Pen cube_1 by s-ta/w (@w_s-ta) on CodePen.

2.2.面の基準を指定

次に、positionプロパティで位置を指定し、作成した6面を重ねます。
preserve-3dを指定し.cubeの子要素となる各面を三次元的に展開できるようにします。
ついでに、少し色を透過しておきます。

CSS（抜粋）

.cube{
  position: relative;
  transform-style: preserve-3d;
}
.cube div{
  border: 1px solid;
  position: absolute;
  opacity:0.7;
}

See the Pen cube_2 by s-ta/w (@w_s-ta) on CodePen.

これで立方体作成の準備が整いました。

2.3.各面を回転させる

前面と背面は、Z軸を基準に面を前後に移動させることによって作成できます。
上面、底面、右面、左面はそれぞれY軸、X軸を中心に回転させ、それを移動させます

これで立方体が完成します。

CSS（抜粋）

.s_front{
  background: red;
  transform: translateZ(100px);
}
.s_back{
  background: orange;
  transform: translateZ(-100px);
}
.s_right{
  background: yellow;
  transform: rotateY(90deg) translateZ(100px);
}
.s_left{
  background: green;
  transform: rotateY(-90deg) translateZ(100px);
}
.s_top{
  background: blue;
  transform: rotateX(90deg) translateZ(100px);
}
.s_bottom{
  background: purple;
  transform: rotateX(-90deg) translateZ(100px);
}

そのままでは分かりづらいので、立方体に以下を指定してやや回転させた結果がこちらです。

CSS（抜粋）

.cube{
 position: relative;
 transform-style: preserve-3d;
 transform: rotateX(-20deg) rotateY(20deg) rotateZ(-20deg);
}

See the Pen cube_3 by s-ta/w (@w_s-ta) on CodePen.

3.ラベルとラジオボタンで立方体を動かす

3次元像の操作はjQueryなどで行うことが一般的ですが、ある程度の操作であれば、
擬似クラスのcheckedを活用することにより、HTMLとCSSのみで実現することができます。

ここでは、上下左右、正面のボタンを作成し、立方体をそれぞれの方向に動かしてみます。

3.1.ボタンの作成

まずはラジオボタンとその操作を行うそれっぽい見た目のラベルを立方体の手前に配置します。

HTML（抜粋）

<div class="base">
  <label class="label" for="top"></label>
  <label class="label" for="left"></label>
  <label class="label" for="right"></label>
  <label class="label" for="bottom"></label>
  <label class="label" for="center"></label>
  <input type="radio" name="labels" id="top">
  <input type="radio" name="labels" id="left">
  <input type="radio" name="labels" id="right">
  <input type="radio" name="labels" id="bottom">
  <input type="radio" name="labels" id="center">
  <div class="cube">

CSS（抜粋）

input{
  display: none;
}
label{
  height: 10px;
  width: 10px;
  background: none;
  position: absolute;
  z-index: 10;
  border-top: 3px solid white;
  border-left: 3px solid white;
}
.top{
  top: 0;
  left: 50%;
  margin-left: -6px;
  transform: rotate(45deg);
}
.left{
  top:50%;
  left:0;
  margin-top: -6px;
  transform: rotate(-45deg);
}
.right{
  top:50%;
  right:0;
  margin-top: -6px;
  transform: rotate(135deg);
}
.bottom{
  bottom: 0;
  left: 50%;
  margin-left: -6px;
  transform: rotate(225deg);
}
.center{
  height: 20px;
  width: 20px;
  border-radius: 10px;
  border:none;
  background: white;
  top: 50%;
  left: 50%;
  margin-top: -9px;
  margin-left: -9px;
}

See the Pen cube_4 by s-ta/w (@w_s-ta) on CodePen.

3.2.各ボタンに回転のアニメーションを設定する

それぞれがチェックされた際の回転方向を指定します。
ここでは、各矢印をクリックしたらそれぞれの方向に90度回転、中央の丸をクリックすると初期表示に戻るようにします。

CSS（抜粋）

.cube{
  position: relative;
  transform-style: preserve-3d;
  transition: 1s;
}

#top:checked ~ .cube{
  transform: rotateX(90deg);
}
#bottom:checked ~ .cube{
  transform: rotateX(-90deg);
}
#left:checked ~ .cube{
  transform: rotateY(-90deg);
}
#right:checked ~ .cube{
  transform: rotateY(90deg);
}

また、.cubeにtransitionを指定し、これらの回転を滑らかに行えるようにします。

CSS（抜粋）

.cube{
  position: relative;
  transform-style: preserve-3d;
  transition: 1s;
}

これで、立方体を操作できるようになりました！
改めて完成図を貼ってみます。

See the Pen cube_5 by s-ta/w (@w_s-ta) on CodePen.

4.おわりに

いかがでしたでしょうか。
全てのブラウザに対応しているわけではないので、業務レベルで使えるかどうかは微妙なところですが、
CSSだけで三次元図形を軽快に操作ができるのは驚きですね。

今回メインで使用したtransformプロパティは、使いこなすとCSSだけでも様々な表現ができます。
埋め込みに使用したCodePenにも、素晴らしい作品が多数掲載されていますので、ぜひ見てみてください！