transform-functions
transform-functionsは、エレメントの回転、拡大/縮小、傾斜、移動を指定する transform プロパティに使用される関数群で、 エレメントを回転、拡大/縮小、傾斜、移動のための計算値を出します。
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移動します。移動量は数値で指定します。
以上が行列で、
と表されます。この行列によって、エレメントの左上端(0,0)の対角座標(x,y)の変化を知ることができます。
上記の
から、対角の座標の変化が計算できます。
例えば、matrix(a,b,c,d,x,y)関数の初期値はmatrix(1,0,0,1,0,0)です。
これを計算すること、
座標(x,y)の位置は変化していないことが分かります。
拡大/縮小
例えば、X軸方向に2倍、Y軸方向に3倍拡大したとします。
xの2倍、yの3倍になったことが分かります。
回転
回転させるためには、
matrix( a * Math.cos(Θ), b * Math.sin(-Θ), c * Math.cos(Θ), d * Math.sin(Θ) )を計算します。
例えば、45°回転させたら。
となります。
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]です?
上記の式から起点(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 )です。
変化がないことが分かります。
拡大/縮小
例えば、X軸方向に2倍、Y軸方向に3倍、Z軸方向に1.5倍拡大したとします。
拡大することで、対角の座標(x,y,z)が(2x,3y,1.5z)になったことが分かります。
移動
例えば、X軸方向に20、Y軸方向に15、Z軸方向に10移動したとします。
移動することで、対角の座標(x,y,z)が(x+20,y+15,z+10)になったことが分かります。
回転
回転はX,Y,Z軸を中心に回転する式はそれぞれ以下のようになります。
X軸を中心に回転
Y軸を中心に回転
Z軸を中心に回転
X軸を中心に30°、Y軸を中心に40°回転すると以下のようになります。
matrix()関数やmatrix3d()関数は線形代数を知る必要があるかと思います。これら以外の関数を使った方が簡易であると思います。