CSS アドバンス

CSS3 3D トランスフォーム

CSS3 では 3D トランスフォーム（3D Transform）を使用することで、要素を 3 次元の空間上で操作することが可能になります。これにより、2D の平面的なデザインを超え、奥行き（Z 軸）を活用したリッチなユーザーインターフェースを構築できます。

1. CSS3 3D トランスフォーム

3D トランスフォームを使用すると、要素を X 軸、Y 軸、そして Z 軸に沿って移動、回転、拡大縮小させることができます。

主要な回転メソッドは以下の通りです：

  • rotateX()
  • rotateY()
  • rotateZ()

2. rotateX() メソッド

rotateX() メソッドは、要素をその X 軸（水平軸） を中心に、指定された角度で回転させます。

#myDiv {
  /* X軸を中心に150度回転 */
  transform: rotateX(150deg);
}

3. rotateY() メソッド

rotateY() メソッドは、要素をその Y 軸（垂直軸） を中心に、指定された角度で回転させます。

#myDiv {
  /* Y軸を中心に150度回転 */
  transform: rotateY(150deg);
}

4. rotateZ() メソッド

rotateZ() メソッドは、要素をその Z 軸 を中心に、指定された角度で回転させます。これは 2D 平面における通常の回転（rotate()）と同様の挙動になります。

#myDiv {
  /* Z軸を中心に90度回転 */
  transform: rotateZ(90deg);
}

5. 3D トランスフォームプロパティ一覧

3D 変形を制御するために使用される主要な CSS プロパティです。これらを組み合わせることで、複雑な 3D アニメーションやレイアウトを実現します。

プロパティ説明
transform要素に 2D または 3D の変形を適用します。
transform-origin変形の基準点（原点）を変更します。
transform-styleネストされた子要素を 3D 空間内に配置するか（preserve-3d）、あるいは平面にフラット化するか（flat）を指定します。
perspective3D 変形された要素に対して、どれくらいの「奥行き（遠近感）」を与えるかを指定します。
perspective-origin3D 要素をどの視点から見ているかを指定します。
backface-visibility要素を回転させて裏側が見えたとき、その裏面を表示するかどうかを指定します。

6. 3D トランスフォームメソッド一覧

transform プロパティで使用できる 3D 固有のメソッドです。

メソッド説明
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)4x4 の行列を利用して 3D 変形を定義します。
translate3d(x,y,z)X, Y, Z 軸方向の移動を定義します。
translateX(x)X 軸方向の移動を定義します。
translateY(y)Y 軸方向の移動を定義します。
translateZ(z)Z 軸方向の移動を定義します。
scale3d(x,y,z)X, Y, Z 軸方向の拡大縮小を定義します。
scaleX(x)幅（X 軸方向）の拡大縮小を定義します。
scaleY(y)高さ（Y 軸方向）の拡大縮小を定義します。
scaleZ(z)奥行き（Z 軸方向）の拡大縮小を定義します。
rotate3d(x,y,z,angle)任意の 3D 軸を中心とした回転を定義します。
rotateX(angle)X 軸を中心とした回転を定義します。
rotateY(angle)Y 軸を中心とした回転を定義します。
rotateZ(angle)Z 軸を中心とした回転を定義します。
perspective(n)3D 変形要素のパースペクティブ（遠近感）ビューを定義します。

3D トランスフォームを使いこなす鍵は perspective プロパティの理解にあります。これがないと、要素は単に潰れた 2D のように見えてしまいます。また、カードが裏返るようなアニメーション（Flip Card）を実装する際には、backface-visibility: hidden が必須のテクニックとなります。