CSS `transform` プロパティにおける `matrix3d()` 関数：詳細ガイド
matrix3d() 関数は、16個の数字で構成される4x4行列を受け取ります。この行列は、要素がどのように変換されるかを決定します。行列の各数は、変換の特定の側面を制御します。
matrix3d() 関数の構文は以下の通りです。
transform: matrix3d(a11, a12, a13, a14,
a21, a22, a23, a24,
a31, a32, a33, a34,
a41, a42, a43, a44);
ここで、aij (i = 1, 2, 3, 4; j = 1, 2, 3, 4) は行列の要素です。
matrix3d() 関数の例：
transform: matrix3d(1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1);
matrix3d() 関数を使用して、要素を回転、スケーリング、移動することができます。回転、スケーリング、移動の一般的なマトリックスを次に示します。
回転
transform: matrix3d(cos(θ), -sin(θ), 0, 0,
sin(θ), cos(θ), 0, 0,
0, 0, 1, 0,
0, 0, 0, 1);
ここで、θ は回転角度 (ラジアン) です。
スケーリング
transform: matrix3d(sx, 0, 0, 0,
0, sy, 0, 0,
0, 0, sz, 0,
0, 0, 0, 1);
ここで、sx、sy、sz はスケーリングの係数です。
移動
transform: matrix3d(1, 0, 0, tx,
0, 1, 0, ty,
0, 0, 1, tz,
0, 0, 0, 1);
ここで、tx、ty、tz は移動量 (ピクセル) です。
matrix3d() 関数は、さまざまな3D変換を組み合わせるために使用することもできます。たとえば、要素を 45 度回転してから、X 軸方向に 100 ピクセル移動するには、次のコードを使用します。
transform: matrix3d(0.707, -0.707, 0, 0,
0.707, 0.707, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1) matrix3d(1, 0, 0, 100,
0, 1, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1);
matrix3d() 関数は、Web ページに驚くべき3D効果を作成するための強力なツールです。ただし、行列の数学に慣れている必要があることに注意してください。
matrix3d() 関数の利点
- パフォーマンスが良好で、ハードウェアアクセラレーションに対応しています。
- さまざまな3D変換を組み合わせて、複雑な効果を作成できます。
- 要素を3D空間で自由に回転、スケーリング、移動できます。
- 複雑な変換を使用
- 古いブラウザではサポートされていない場合があります。
- 行列の数学に慣れている必要があります。
例 1: 要素を回転する
この例では、赤い立方体を45度回転させます。
.box {
width: 50px;
height: 50px;
background-color: red;
transform: matrix3d(0.707, -0.707, 0, 0,
0.707, 0.707, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1);
}
例 2: 要素をスケーリングする
この例では、青い立方体をX軸方向に2倍、Y軸方向に3倍、Z軸方向に4倍にスケーリングします。
.box {
width: 50px;
height: 50px;
background-color: blue;
transform: matrix3d(2, 0, 0, 0,
0, 3, 0, 0,
0, 0, 4, 0,
0, 0, 0, 1);
}
例 3: 要素を移動する
この例では、緑色の立方体をX軸方向に100ピクセル、Y軸方向に50ピクセル、Z軸方向に25ピクセル移動します。
.box {
width: 50px;
height: 50px;
background-color: green;
transform: matrix3d(1, 0, 0, 100,
0, 1, 0, 50,
0, 0, 1, 25,
0, 0, 0, 1);
}
この例では、紫色の立方体を45度回転させ、X軸方向に2倍、Y軸方向に3倍、Z軸方向に4倍にスケーリングし、X軸方向に100ピクセル、Y軸方向に50ピクセル、Z軸方向に25ピクセル移動します。
.box {
width: 50px;
height: 50px;
background-color: purple;
transform: matrix3d(0.707, -0.707, 0, 100,
0.707, 0.707, 0, 50,
0, 0, 1, 25,
0, 0, 0, 1);
}
個別の変換プロパティを使用する
matrix3d() 関数は、回転、スケーリング、移動など、さまざまな変換を単一の行列表現でカプセル化します。しかし、それぞれの変換を個別に制御したい場合は、以下のプロパティを使用できます。
translateZ(): 要素を Z 軸方向に移動します。translateY(): 要素を Y 軸方向に移動します。translateX(): 要素を X 軸方向に移動します。scaleZ(): 要素を Z 軸方向にスケーリングします。scaleY(): 要素を Y 軸方向にスケーリングします。scaleX(): 要素を X 軸方向にスケーリングします。rotateZ(): 要素を Z 軸周りに回転します。rotateY(): 要素を Y 軸周りに回転します。rotateX(): 要素を X 軸周りに回転します。
これらのプロパティは、matrix3d() 関数よりも記述が簡潔で、個々の変換をより細かく制御できます。
例
.box {
width: 50px;
height: 50px;
background-color: red;
transform: rotateX(45deg) scale(2, 3, 4) translate(100px, 50px, 25px);
}
この例では、matrix3d() 関数で行うのと同じ変換を個別のプロパティを使用して実現しています。
perspective プロパティを使用する
perspective プロパティは、3D 空間における要素の奥行きを表現するために使用されます。これにより、matrix3d() 関数を使用せずに、要素を奥行き方向に配置することができます。
例
.container {
perspective: 400px; /* 奥行きを 400 ピクセルに設定 */
}
.box {
width: 50px;
height: 50px;
background-color: red;
transform: translateZ(-100px); /* Z 軸方向に 100 ピクセル手前に配置 */
}
この例では、container 要素に perspective プロパティを設定して奥行きを定義し、box 要素を translateZ() プロパティを使用して Z 軸方向に手前に配置することで、3D 空間における奥行きを表現しています。
3D トランスフォーメーションライブラリを使用する
matrix3d() 関数よりも高度な 3D 変換を作成したい場合は、JavaScript の 3D トランスフォーメーションライブラリを使用することができます。人気のあるライブラリには、Three.js や Babylon.js などがあります。
これらのライブラリは、回転、スケーリング、移動、視点設定など、より複雑な 3D 変換を簡単に作成するためのツールと API を提供します。
matrix3d() 関数は強力なツールですが、状況によっては代替手段の方が適切な場合があります。上記で紹介した代替方法を検討し、ニーズに合ったものを選択してください。
- 3D 変換は、パフォーマンスに影響を与える可能性があります。複雑な 3D 変換を使用する場合は、パフォーマンスを考慮する必要があります。