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

transform-functions

　transform-functionsは、エレメントの回転、拡大/縮小、傾斜、移動を指定する transform プロパティに使用される関数群で、 エレメントを回転、拡大/縮小、傾斜、移動のための計算値を出します。

40°回転
transform-origin: initial;
transform: rotate(40deg);

ページ内 Index

構文(Syntax)

Syntax摘要
回転
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）
視点距離
perspective(n)3Dで使用、視点からの距離を指定
移動
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次元に配置されたエレメントを回転、拡大/縮小、傾斜、移動

matrix()関数

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

a,bは上右端の位置をX軸方向にa倍、Y軸方向にb倍した位置にします。

c,dは左下端の位置をX軸方向にc倍、Y軸方向にd倍した位置にします。

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

以上が行列で、

actx bdty 001

と表されます。この行列によって、エレメントの左上端(0,0)の対角座標(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

から、対角の座標の変化が計算できます。

例えば、matrix(a,b,c,d,x,y)関数の初期値は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軸方向に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(Θ) )
を計算します。

例えば、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

となります。

matrix3d()関数について

　matrix3d()関数は3次元x,y,zの位置を4×4の行列から計算する関数です。

matrix3d(a1,b1,c1,d1,a2,b2,c2,d2,a3,b3,c3,d3,a4,b4,c4,d4)関数の引数は以下のようになります。

a1,a2,a3は手前上右端の位置をX軸方向にa1倍、Y軸方向にa2倍、Y軸方向にa3倍した位置にします。

b1,b2,b3は手前左下端の位置をX軸方向にb1倍、Y軸方向にb2倍、Y軸方向にb3倍した位置にします。

c1,c2,c3は最奥上端の位置をX軸方向にc1倍、Y軸方向にc2倍、Y軸方向にc3倍した位置にします。

a4,b4,c4はX軸方向にa4、Y軸方向にb4,Z軸方向にc4移動させる量です。

?d1,d2,d3,d4は多くの場合、[0,0,0,1]です?

a1a2a3a4 b1b2b3b4 c1c2c3c4 d1d2d3d4 x y z 1 = a1x + a2y + a3z + a4 b1x + b2y + b3z + b4 c1x + c2y + c3z + c4 d1x + d2y + d3z + d4 = X Y Z N

上記の式から起点(0,0,0)の対角座標（x,y,z）の変化を知ることができます。

例えば、matrix3d(a1,b1,c1,d1,a2,b2,c2,d2,a3,b3,c3,d3,a4,b4,c4,d4)関数の初期値はmatrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1 )です。

1000 0100 0010 0001 x y z 1 = x + 0 + 0 + 0 0 + y + 0 + 0 0 + 0 + z + 0 0 + 0 + 0 + 1 = x y z 1

変化がないことが分かります。

拡大/縮小

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

2000 0300 001.50 0001 x y z 1 = 2x + 0 + 0 + 0 0 + 3y + 0 + 0 0 + 0 + 1.5z + 0 0 + 0 + 0 + 1 = 2x 3y 1.5z 1

拡大することで、対角の座標(x,y,z)が(2x,3y,1.5z)になったことが分かります。

移動

例えば、X軸方向に20、Y軸方向に15、Z軸方向に10移動したとします。

10020 01015 00110 0001 x y z 1 = x + 0 + 0 + 20 0 + y + 0 + 15 0 + 0 + z + 10 0 + 0 + 0 + 1 = x+20 y+15 z+10 1

移動することで、対角の座標(x,y,z)が(x+20,y+15,z+10)になったことが分かります。

回転

回転はX,Y,Z軸を中心に回転する式はそれぞれ以下のようになります。

X軸を中心に回転
1000 0cosΘxsinΘx0 0-sinΘxcosΘx0 0001 x y z 1 = x ycosΘx + zsinΘx -ysinΘx + zcosΘx 1
Y軸を中心に回転
cosΘy0-sinΘy0 0100 sinΘy0cosΘy0 0001 x y z 1 = xcosΘy - zsinΘy y xsinΘy + zcosΘy 1
Z軸を中心に回転
cosΘzsinΘz00 -sinΘzcosΘz00 0010 0001 x y z 1 = xcosΘz + ysinΘz -xsinΘz + ycosΘz z 1

X軸を中心に30°、Y軸を中心に40°回転すると以下のようになります。

1000 0cosΘxsinΘx0 0-sinΘxcosΘx0 0001 cosΘy0-sinΘy0 0100 sinΘy0cosΘy0 0001 x y z 1 = cosΘy0-sinΘy0 -sinΘx・sinΘycosΘxsinΘx・cosΘy0 cosΘx・sinΘy-sinΘycosΘx・cosΘy0 0001 x y z 1 = cosΘy・x - sinΘy・z -sinΘx・sinΘy・x + cosΘx・y + sinΘx・cosΘy・z cosΘx・sinΘy・x - sinΘy・y + cosΘx・cosΘy・z 1

matrix()関数やmatrix3d()関数は線形代数を知る必要があるかと思います。これら以外の関数を使った方が簡易であると思います。

関連（Related）