matrix() ファンクション
matrix() ファンクションは、2次元座標変換による画像出力を行う CSS ファンクションです。エレメントの拡大/縮小、傾斜、移動、回転を一括で指定することができます。
transform-functions のひとつで、transform プロパティで使用します。
ほとんどのボックスエレメントは変形できますが、変形ができないエレメントもあることに留意してください。
.content {
transform: matrix( 1, 0, 0, 1, 0, 0 );
}
詳しくは Example を参照してください
上記の例は、拡大/縮小、傾斜、移動、回転をしていない状態です。詳しくはmatrix() ファンクションについて
を参照してください。
matrix() ファンクションは、エレメントの変形に関する transform プロパティの transform-functions として利用します。
2次元座標変換についは、コンピュータグラフィックス 2.2次元座標変換
などを参照してみてください。
ページ内 Index
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 移動します。移動量は数値で指定します。
以上を行列で表すと、
になります。この行列によって、右下端の座標からエレメントの X 軸方向や Y 軸方向の変化を知ることができます。
よって、
から、右下端の座標からエレメントの X 軸と Y 軸の変化が計算できます。
例えば、matrix( ) 関数の初期値は matrix( 1, 0, 0, 1, 0, 0 ) です。
これを計算すると、
ここから X 軸の長さと Y 軸の長さが変化していないことから、右下端の座標( x, y )の位置は変化していないことが分かります。
拡大/縮小
例えば、X軸方向に2倍、Y軸方向に3倍拡大したとします。
xの2倍、yの3倍になったことが分かります。
回転
回転させるためには、
matrix( a * Math.cos(Θ), b * Math.sin(-Θ), c * Math.cos(Θ), d * Math.sin(Θ), 0, 0 )を計算します。
例えば、45°回転させたいなら以下のように計算します。
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 | 親エレメン上に表示するか、3D上に表示するか |
視点距離 | |
perspective | 3Dで使用、視点からの距離を指定 |
メソッド
メソッド | 摘要 |
---|---|
回転 | |
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次元に配置されたエレメントを回転、拡大/縮小、傾斜、移動 |