サンプル例1の内容

【例1】3つの例はCSSであらかじめ用意し、javascriptで表示非表示や、cssの変更等をしています。
ここでは通常記述した影BOXとmatrixで記述した黄色BOXを比較しています。
普通に両方変更すれば重なるだけなので、黄色い方は親枠にマウスホバーで、matrix指定した状態へと変化する形にしています。

matrix(1,0,0,1,50,10) X軸方向の移動距離 50 。Y軸方向の移動距離 10 。 = translate(50px,10px)
matrix(1.5,0,0,0.5,0,0) X軸方向の拡大縮小率 1.5 。Y軸方向の拡大縮小率 0.5 。 = scale(1.5,0.5)
matrix (1,0,1,1,0,0) X軸方向の傾斜角度 1 。Y軸方向の傾斜角度 0 。 = skewX(45deg)。

2D変形を行列で指定プロパティ

matrix(xr,dy,dx,yr,xt,yt)

行列(3*3)
xr,dx,xt
dy,yr,yt
0, 0, 1
xr=X軸方向の拡大縮小率。yr=Y軸方向の拡大縮小率。
dx=X軸方向の傾斜角度。dy=Y軸方向の傾斜角度。
xt=X軸方向の移動距離。yt=Y軸方向の移動距離。
matrix(1,0,0,1,0,0)で変形なし状態。この状態から変形させたい数値等を入力 行列(3*3)
1,0,0
0,1,0
0,0,1
角度は度数法 (degree) ではなく弧度法 (radian) で指定。
例：90deg の場合、90 * π / 180 = 1.570796325 [rad]