CSS Transformで3Dキューブの面を配置する

rotateX、rotateY、translateZを使ったCSS 3Dキューブの面配置方法。preserve-3dと面の位置決めを理解する。

3D Transforms

詳細な説明

3Dキューブの面の構築

CSS 3Dキューブは、rotateXrotateYtranslateZの組み合わせを使って6つの面を3D空間に配置することで構築されます。各面は正しい方向に回転され、外側に押し出されます。

面の配置

.cube {
  transform-style: preserve-3d;
  width: 200px;
  height: 200px;
  position: relative;
}

.face {
  position: absolute;
  width: 200px;
  height: 200px;
}

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

rotateの後にtranslateZが来る理由

Transformの順序が重要です。各面はまず正しい方向を向くように回転され、次にキューブサイズの半分だけtranslateZ外側に押し出されます。順序を逆にすると、面が回転前に間違った方向に移動します。

コンテナ

3D効果を可視化するために、親要素にperspectiveが必要です:

.scene {
  perspective: 600px;
  perspective-origin: center center;
}

インタラクティブキューブ

キューブ全体を回転させて異なる面を表示できます:

.cube.show-right {
  transform: rotateY(-90deg);
}

ユースケース

3D画像カルーセル、インタラクティブな商品ショーケース、Webベースゲームのサイコロアニメーション、各面が異なるセクションを表すクリエイティブなナビゲーションメニューに使用されます。

試してみる — CSS Transform Playground

フルツールを開く