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

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）