CSS 3D Transform で描くハイパーキューブ

作品

3つの立方体（外・中・内）が、それぞれ異なる回転軸と速度で動き続けます。 画像もライブラリも使わず、純粋な CSS だけで奥行きを持つ 3D 空間を作っています。

CSS 3D の基本構造

CSS 3D は「カメラ（perspective）」と「3D 空間（preserve-3d）」の2つの設定で成立します。

/* カメラの焦点距離。小さいほど歪みが強くなる */
.scene {
  perspective: 700px;
}

/* 子要素の transform を 3D 空間に展開する */
.cube {
  transform-style: preserve-3d;
}

perspective は 1 つ上の祖先要素に設定し、preserve-3d は 3D 変換する要素自身に設定します。 この 2 つがセットになって初めて立体に見えます。

6面の配置

立方体の 1 辺を S とすると、各面は translateZ(S/2) だけ手前に押し出してから回転させます。

.front  { transform: rotateY(0deg)   translateZ(80px); }
.back   { transform: rotateY(180deg) translateZ(80px); }
.right  { transform: rotateY(90deg)  translateZ(80px); }
.left   { transform: rotateY(-90deg) translateZ(80px); }
.top    { transform: rotateX(90deg)  translateZ(80px); }
.bottom { transform: rotateX(-90deg) translateZ(80px); }

CSS カスタムプロパティで3サイズを共通化

外・中・内で辺の長さが異なるため、面ごとの translateZ が変わります。 CSS カスタムプロパティ（--half）を親要素に定義することで、子要素がそれを参照できます。

.outer { --half: 80px; width: 160px; height: 160px; }
.mid   { --half: 48px; width:  96px; height:  96px; }
.inner { --half: 20px; width:  40px; height:  40px; }

/* 3サイズ共通の face スタイル */
.face.front { transform: rotateY(0deg)  translateZ(var(--half)); }
.face.back  { transform: rotateY(180deg) translateZ(var(--half)); }
/* ...以下同様 */

3種類の回転アニメーション

各立方体に異なる @keyframes を割り当てて、互いに異なる動きをさせています。

外側 — Y軸回転（X軸に 20° 傾けた状態で）

@keyframes spin-y {
  from { transform: rotateX(20deg) rotateY(0deg); }
  to   { transform: rotateX(20deg) rotateY(360deg); }
}

X 軸を 20° 傾けることで「斜め上から見た」自然な視点になります。

中間 — XY逆回転

@keyframes spin-xy-rev {
  from { transform: rotateX(0deg)    rotateY(0deg); }
  to   { transform: rotateX(-360deg) rotateY(-220deg); }
}

X と Y の回転量を非整数比（360:220）にすると、同じポーズに戻らず変化し続けます。

内側 — XYZ全軸タンブリング

@keyframes spin-tumble {
  from { transform: rotateX(0deg)   rotateY(0deg)   rotateZ(0deg); }
  to   { transform: rotateX(360deg) rotateY(540deg) rotateZ(180deg); }
}

3軸同時かつ非整数比で回転させることで、完全にランダムに見える「タンブリング」になります。

手法比較