CSS3で3Dの立方体をつくる

サンプルはこちら。

See the Pen yozsJ by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

前回は複数の円状レイヤーのY軸を回転させたものを紹介していましたが、今回はZ軸（前後）の押し出しを使うことで完全な3D状態になっています。

HTML

<article class="cube">
  <div class="face1">上面</div>
  <div class="face2">下面</div>
  <div class="face3">前面</div>
  <div class="face4">後面</div>
  <div class="face5">左面</div>
  <div class="face6">右面</div>
</article>

立方体は6つの面があるので、レイヤーもその分必要になります。

CSS(Sass)

$size: 200px;
.cube {
  display: block;
  position: relative;
  margin: 50px auto;
  width: $size;
  height: $size;
  line-height: $size;
  text-align: center;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  @include animation(rotate 10s infinite linear);
}
[class*=face] {
  position: absolute;
  width: $size;
  height: $size;
  border: solid 1px #fff;
  background-color: rgba(#fff,.2);
}
.face1 {
  @include transform(rotateX(90deg) translateZ($size/2));
}
～
@-webkit-keyframes rotate {
  0% {@include transform(rotateY(0deg) rotateZ(0deg))}
  100% {@include transform(rotateY(360deg) rotateZ(360deg))}
}

「.cube」は立方体全体のサイズを固定し、アニメーション対象とする設定にしています。
また「transform-style: perseve-3d」というプロパティを設定しています。これは3D状に表示されるようするための設定となります。

次の「[class*=face]」で面全体の共通設定を行っています。

次に「.face1～6」の設定を行っています。
「rotateX」でX軸中心に90度回転させると、立っていた面は横に寝ます。それをZ軸方向に進ませると上に上がる形になります。face1の場合は立方体の上面になる設定です。

立方体の下面であればZ軸を下げる形で、左右の面はX軸の代わりにY軸90度で左右に向けてZ軸移動し、前後の面はZ軸のみで前後に出すだけです。

最後の「keyframes」でY軸とZ軸で360度回転するアニメーション設定を行っています。