【CSS Modules】matrix3d()関数の使い方

matrix3d()関数は、CSSにおいてHTML要素の3D空間における変換（Transform）を定義するために使用される関数です。この関数は、要素の移動、回転、拡大縮小、傾斜、そして透視投影といった複数の3D変形を、4x4の変換行列を用いて一度に適用することを可能にします。

matrix3d()関数は、21個の数値引数を受け取ります。これらの数値は、4行4列の変換行列の各要素に直接対応しており、要素の各頂点の座標が3D空間内でどのように変換されるかを数学的に定義します。具体的には、最初の4つの引数は変換行列の1列目を構成しX軸方向の変換に影響を与え、次の4つが2列目としてY軸方向、その次の4つが3列目としてZ軸方向の変換を司ります。さらに、次の4つの引数は平行移動（X, Y, Z方向への移動）や透視投影、そして最後の4つが行列の最終行を構成し、変換の全体的な挙動を決定します。

translate3d()やrotate3d()、scale3d()といった個別の3D変形関数と異なり、matrix3d()はより低レベルで直接的な制御を提供するため、複数の変形を組み合わせた複雑なアニメーションや、特定の視点からの遠近感を表現する高度な3Dグラフィック効果の実装に不可欠です。システムエンジニアを目指す方にとって、この関数はウェブアプリケーションやユーザーインターフェースにおいて、滑らかでパフォーマンスの高い3D表現を実現するための強力なツールとなります。ブラウザはGPUを活用してこの変換を高速に処理するため、複雑な視覚効果も快適に動作させることが可能です。

Copy
1transform: matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4);

<number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>

• <number>: 3D変換行列の最初の要素（x軸方向の拡大縮小・回転・平行移動）
• <number>: 3D変換行列の2番目の要素（y軸方向の拡大縮小・回転・平行移動）
• <number>: 3D変換行列の3番目の要素（z軸方向の拡大縮小・回転・平行移動）
• <number>: 3D変換行列の4番目の要素（透視投影）
• <number>: 3D変換行列の5番目の要素（x軸方向の拡大縮小・回転・平行移動）
• <number>: 3D変換行列の6番目の要素（y軸方向の拡大縮小・回転・平行移動）
• <number>: 3D変換行列の7番目の要素（z軸方向の拡大縮小・回転・平行移動）
• <number>: 3D変換行列の8番目の要素
• <number>: 3D変換行列の9番目の要素（x軸方向の拡大縮小・回転・平行移動）
• <number>: 3D変換行列の10番目の要素（y軸方向の拡大縮小・回転・平行移動）
• <number>: 3D変換行列の11番目の要素（z軸方向の拡大縮小・回転・平行移動）
• <number>: 3D変換行列の12番目の要素
• <number>: 3D変換行列の13番目の要素（x軸方向の平行移動）
• <number>: 3D変換行列の14番目の要素（y軸方向の平行移動）
• <number>: 3D変換行列の15番目の要素（z軸方向の平行移動）
• <number>: 3D変換行列の16番目の要素

3次元空間での変換行列を定義し、要素を適用することで、要素の回転、拡大縮小、傾き、平行移動を同時に行うことができます。