“matrix()”関数

“matrix()”関数

“matrix()”関数は要素を二次元平面上でアフィン変換するため変形マトリクスの成分を直接記述するための関数です。

“<transform-function>”値として使用することができ、“transform”プロパティで要素を線型変換や平行移動することができます。

引数は6個の“<number>”値をコンマ(“,”)で区切って記述します。

matrix(〚m11〛,〚m12〛,〚m21〛,〚m22〛,〚m41〛,〚m42〛)


それぞれの引数は4×4の変形マトリクスのうち、二次元変換に関わる6個の成分に対応します。

“matrix()”関数で表される変形マトリクスが単位行列の場合、要素は変形されません。

単位行列を表した“matrix()”関数
matrix(1,0,0,1,0,0)


変形マトリクス

以下は“matrix(a,b,c,d,e,f)”を表す変形マトリクスの成分です。

m11	m21	m31	m41
m12	m22	m32	m42
m13	m23	m33	m43
m14	m24	m34	m44
a	c	0	e
b	d	0	f
0	0	1	0
0	0	0	1

使用例

二次元

.transform-1 { transform: matrix(1,0,0,1,0,0);}
.transform-2 { transform: matrix(1.5,1,0.5,1,0,0);}


matrix(1,0,0,1,0,0)

箱

matrix(1.5,1,0.5,1,0,0)

箱

三次元

.transform-1 { transform: matrix(1,0,0,1,0,0);}
.transform-2 { transform: matrix(1.5,1,0.5,1,0,0);}


matrix(1,0,0,1,0,0)

前

後

右

左

上

下

matrix(1.5,1,0.5,1,0,0)

前

後

右

左

上

下

仕様書

定義されている仕様書

matrix()