CSS Transformで3Dキューブの面を配置する
rotateX、rotateY、translateZを使ったCSS 3Dキューブの面配置方法。preserve-3dと面の位置決めを理解する。
3D Transforms
詳細な説明
3Dキューブの面の構築
CSS 3Dキューブは、rotateX、rotateY、translateZの組み合わせを使って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ベースゲームのサイコロアニメーション、各面が異なるセクションを表すクリエイティブなナビゲーションメニューに使用されます。