備忘録的プログラミングリファレンス

matrix() ファンクション

　matrix() ファンクションは、2次元座標変換による画像出力を行う CSS ファンクションです。エレメントの拡大/縮小、傾斜、移動、回転を一括で指定することができます。
　transform-functions のひとつで、transform プロパティで使用します。

　ほとんどのボックスエレメントは変形できますが、変形ができないエレメントもあることに留意してください。

matrix()
.content {
	transform: matrix( 1, 0, 0, 1, 0, 0 );
}

詳しくは Example を参照してください

　上記の例は、拡大/縮小、傾斜、移動、回転をしていない状態です。詳しくはmatrix() ファンクションについてを参照してください。

　matrix() ファンクションは、エレメントの変形に関する transform プロパティの transform-functions として利用します。

　2次元座標変換についは、コンピュータグラフィックス　2.2次元座標変換などを参照してみてください。

matrix() ファンクションについて

　matrix( a, b, c, d, tx, ty )関数の引数は以下のようになります。

  • a は X 軸方向の拡大／縮小率を表し scaleX() による値を指定します。
  • b は X 軸に対する傾きを表し skewX() による値を指定します。
  • c は Y 軸に対する傾きを表し skewY() による値を指定します。
  • d は Y 軸の拡大／縮小率を表し scaleY() による値を指定します。

tx, ty は移動量で、エレメントの左上端を X 軸方向に tx,Y 軸方向に ty 移動します。移動量は数値で指定します。

　以上を行列で表すと、

actx bdty 001 x y 1

になります。この行列によって、右下端の座標からエレメントの X 軸方向や Y 軸方向の変化を知ることができます。

actx bdty 001 x y 1 = ax+cy+tx bx+dy+ty 1 = X Y 1

　よって、

ax+cy+tx bx+dy+ty 1 = X Y 1

から、右下端の座標からエレメントの X 軸と Y 軸の変化が計算できます。

　例えば、matrix( ) 関数の初期値は matrix( 1, 0, 0, 1, 0, 0 ) です。

　これを計算すると、

100 010 001 x y 1 = 1*x+0*y+0 0*x+1*y+0 0+0+1 = X Y 1

　ここから X 軸の長さと Y 軸の長さが変化していないことから、右下端の座標( x, y )の位置は変化していないことが分かります。

拡大/縮小

　例えば、X軸方向に2倍、Y軸方向に3倍拡大したとします。

200 020 001 x y 1 = 2*x+0*y+0 0*x+3*y+0 0+0+1 = 2x 3y 1

xの2倍、yの3倍になったことが分かります。

回転

　回転させるためには、

matrix( a * Math.cos(Θ), b * Math.sin(-Θ), c * Math.cos(Θ), d * Math.sin(Θ), 0, 0 )
を計算します。

　例えば、45°回転させたいなら以下のように計算します。

cos(45deg)cos(45deg)0 sin(-45deg)sin(45deg)0 001 x y 1 = 0.707*x + 0.707*y -0.707*x + 0.707*y 1

a=0.707、b=-0.707、c=0.707、d=0.707 であれば45°回転することが分かります。

構文(Syntax)

CSS

matrix( a, b, c, d, x, y )

引数

　引数については上記のmatrix() ファンクションについてを参照してください。

Example

　matrix()関数による回転例です。

　回転の中心の調整には、transform-originプロパティを指定します。

関連する CSS プロパティとメソッド

プロパティ

プロパティ摘要
transformエレメントの変形を表示
transform-origin基準点（中心）を指定する
transform-style親エレメン上に表示するか、３Ｄ上に表示するか
視点距離
perspective3Dで使用、視点からの距離を指定

メソッド

メソッド摘要
回転
rotate( angle )エレメントの回転を角度で指定（単位：deg）
rotate3d( x, y, z, angle )x,y,zは基準軸の有無を表す、0または1。angleは回転量（単位：deg）
rotateX(angle)X軸（水平方向）を中心に回転（単位：deg）
rotateY(angle)Y軸（垂直方向）を中心に回転（単位：deg）
rotateZ(angle)Z軸（前後方向）を中心に回転（単位：deg）
拡大/縮小
scale( x ,y )X軸やY軸方向の拡大/縮小を数値で指定、CSS 長さの単位 を参照のこと
scale3d( x, y, z )X、Y、Z軸方向の拡大/縮小を数値で指定、CSS長さの単位を参照のこと
scaleX(x)X軸（水平）方向の拡大/縮小を数値で指定、CSS長さの単位を参照のこと
scaleY(y)Y軸（垂直）方向の拡大/縮小を数値で指定、CSS長さの単位を参照のこと
scaleZ(z)Z軸（前後）方向の拡大/縮小を数値で指定、CSS長さの単位を参照のこと
傾斜
skew( x-angle, y-angle )X軸やY軸の傾きを角度で指定（ 単位：deg ）
skewX(angle)X軸の傾きを角度で指定（単位：deg）
skewY(angle)Y軸の傾きを角度で指定（単位：deg）
移動
translate( x, y )X軸やY軸方向への移動量を数値で指定、CSS長さの単位を参照のこと
translate3d(x,y,z)X、Y、Z軸方向を数値で指定、CSS長さの単位を参照のこと
translateX(x)X軸（水平）方向に移動、数値で指定、CSS長さの単位を参照のこと
translateY(y)Y軸（垂直）方向に移動、数値で指定、CSS長さの単位を参照のこと
translateZ(z)Z軸（前後）方向に移動、数値で指定、CSS長さの単位を参照のこと
行列変換
matrix( a, b, c, d, x, y )平面のエレメントを回転、拡大/縮小、傾斜、移動
matrix3d(a1,b1,c1,d1,a2,b2,c2,d2,a3,b3,c3,d3,a4,b4,c4,d4)3次元に配置されたエレメントを回転、拡大/縮小、傾斜、移動

関連（Related）