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

matrix()関数は、CSSのtransformプロパティで使用され、HTML要素に2次元の幾何学的変換を適用するために用いる関数です。この関数は、移動、回転、拡大縮小、傾斜といった複数の変換操作を、数学的な2次元変換行列（3x3の同次座標行列）を直接指定することで一度に実行します。

具体的には、matrix(a, b, c, d, tx, ty)の形式で6つの数値を引数として受け取ります。ここで、'a'と'd'は主に要素の拡大縮小率を、'b'と'c'は傾斜（スキュー）の度合いを、そして'tx'と'ty'は要素のX軸方向およびY軸方向への移動量（平行移動）をそれぞれ制御します。

個別の変換を行うtranslate()、rotate()、scale()、skew()などの関数をそれぞれ記述する代わりに、このmatrix()関数一つで複雑な変換を効率的に表現できるため、より高度なデザインやアニメーションの実現に役立ちます。例えば、要素を移動させつつ回転させ、さらに拡大するといった一連の変換を一つの記述で完結させることができます。

特に、複数の変換を同時に適用したり、JavaScriptなどで動的に変換値を計算して適用したりする場合に強力なツールとなります。数学的な変換行列の概念を理解していることで、その挙動をより深く理解し、意図した通りの精密なデザインやインタラクションを作成することが可能になります。

Copy
1transform: matrix(a, b, c, d, tx, ty);

a, b, c, d, tx, ty

• a: number: 水平方向の拡大/縮小と傾きを制御する数値
• b: number: 垂直方向の傾きと拡大/縮小を制御する数値
• c: number: 水平方向の移動を制御する数値
• d: number: 垂直方向の移動を制御する数値
• tx: number: 水平方向への移動量を指定する数値
• ty: number: 垂直方向への移動量を指定する数値

matrix() 関数は、2次元変換行列を定義する <transform-function> 型の値を返します。この値は、要素の水平方向、垂直方向の移動、拡大縮小、回転、傾きなどの変換をまとめて適用するために使用されます。