変換のリストは、どのような変換を適用するのかを指定します。
transform属性の値になります。
変換のリストは、半角スペース、カンマ(",")、あるいは半角スペースとカンマ(",")で区切られたいくつかの変換の組み合わせで表します。
変換には、
matrix(行列)、
translate(平行移動)、
scale(拡大縮小)、
rotate(回転)、
skewX(x軸の傾き)、
skewY(y軸の傾き)
があります。
matrixは、matrix(a b c d e f)のようにパラメータとして6つの値を指定します。
それぞれのパラメータの間は、カンマ(",")あるいは、半角スペース等(半角スペース以外にはタブや改行が該当します。文字コードで、#x20、#x9、#xD、#xAの4つ。)で区切ります。
元の座標系での(x,y)と新しい座標系での(x,y)は次のような関係になります。
新しい座標系でのx = a × 元の座標系でのx + c × 元の座標系でのy + e
新しい座標系でのy = b × 元の座標系でのx + d × 元の座標系でのy + f
例えば、
matrix(1,0,0,1,20,10)
のように書けば、
新しい座標系でのx = 1 × 元の座標系でのx + 20
新しい座標系でのy = 1 × 元の座標系でのy + 10
のようになり、元の座標系での(0,0)は新しい座標系の(20,10)になります。
translateは、translate(tx ty)のようにパラメータとして最大2つの値を指定します。
txがx軸方向の移動量、tyがy軸方向の移動量になります。
それぞれのパラメータの間は、カンマ(",")あるいは、半角スペース等(半角スペース以外にはタブや改行が該当します。文字コードで、#x20、#x9、#xD、#xAの4つ。)で区切ります。
元の座標系での(x,y)と新しい座標系での(x,y)は次のような関係になります。
新しい座標系でのx = 元の座標系でのx + tx
新しい座標系でのy = 元の座標系でのy + ty
例えば、
translate(20,10)
のように書けば、
新しい座標系でのx = 元の座標系でのx + 20
新しい座標系でのy = 元の座標系でのy + 10
のようになり、元の座標系での(0,0)は新しい座標系の(20,10)になります。
translate(tx, ty)はmatrix(1,0,0,1,tx,ty)と同じ変換を表します。
パラメータが1つしか指定されない場合は、tyが指定されないものとして扱われます。tyは指定されない場合は0として扱われます。
したがって、y軸方向の移動量が0の場合は省略できますが、y軸方向の移動量が0の場合は"0"と記述する必要があります。
scaleは、scale(sx sy)のようにパラメータとして最大2つの値を指定します。
sxがx軸方向の拡大率、syがy軸方向の拡大率になります。
それぞれのパラメータの間は、カンマ(",")あるいは、半角スペース等(半角スペース以外にはタブや改行が該当します。文字コードで、#x20、#x9、#xD、#xAの4つ。)で区切ります。
元の座標系での(x,y)と新しい座標系での(x,y)は次のような関係になります。
新しい座標系でのx = sx × 元の座標系でのx
新しい座標系でのy = sy × 元の座標系でのy
例えば、
scale(2,1)
のように書けば、
新しい座標系でのx = 2 × 元の座標系でのx
新しい座標系でのy = 1 × 元の座標系でのy
のようになり、元の座標系での(10,10)は新しい座標系の(20,10)になります。
scale(sx, sy)はmatrix(sx,0,0,sy,0,0)と同じ変換を表します。
パラメータが1つしか指定されない場合は、syが指定されないものとして扱われます。syは指定されない場合はsxと同じ値が指定されたものとして扱われます。
すなわち、y軸方向の拡大率と、y軸方向の拡大率は等しいものとして扱われます。
rotateは、rotate(a cx cy)のようにパラメータとして最大3つの値を指定します。
aが回転角度、cxが回転中心のx座標、cyが回転中心のy座標になります。
それぞれのパラメータの間は、カンマ(",")あるいは、半角スペース等(半角スペース以外にはタブや改行が該当します。文字コードで、#x20、#x9、#xD、#xAの4つ。)で区切ります。
元の座標系での(x,y)と新しい座標系での(x,y)は次のような関係になります。
新しい座標系でのx = cos(a) × 元の座標系でのx - sin(a) × 元の座標系でのy + (-cx × cos(a) + cy × sin(a) + cx)
新しい座標系でのy = sin(a) × 元の座標系でのx + cos(a) × 元の座標系でのy + (-cx × sin(a) - cy × cos(a) + cy)
例えば、
rotate(90, 10, 10)
のように書けば、
新しい座標系でのx = -1 × 元の座標系でのy + 10 × 1 + 10
新しい座標系でのy = 1 × 元の座標系でのx - 10 × 1 + 10
のようになり、元の座標系での(20,20)は新しい座標系の(0,20)になります。
回転中心が(0,0)の場合は、元の座標系での(x,y)と新しい座標系での(x,y)は次のような関係になります。
新しい座標系でのx = cos(a) × 元の座標系でのx - sin(a) × 元の座標系でのy
新しい座標系でのy = sin(a) × 元の座標系でのx + cos(a) × 元の座標系でのy
rotate(a cx cy)はmatrix(cos(a),sin(a),-sin(a),cos(a),-cx×cos(a)+cy×sin(a)+cx,-cx×sin(a)-cy×cos(a)+cy)と同じ変換を表します。
aの単位は度です。
パラメータが1つしか指定されない場合は、回転中心が指定されないものとして扱われます。回転中心は指定されない場合は回転中心は(0,0)として扱われます。
skewXは、skewX(a)のようにパラメータとして1つの値を指定します。
aがx軸の傾き角度になります。
元の座標系での(x,y)と新しい座標系での(x,y)は次のような関係になります。
新しい座標系でのx = 元の座標系でのx + tan(a) × 元の座標系でのy
新しい座標系でのy = 元の座標系でのy
例えば、
skewX(45)
のように書けば、
新しい座標系でのx = 元の座標系でのx + 1 × 元の座標系でのy
新しい座標系でのy = 元の座標系でのy
のようになり、元の座標系での(10,10)は新しい座標系の(20,10)になります。
skewX(a)はmatrix(1,0,tan(a),1,0,0)と同じ変換を表します。
aの単位は度です。
skewYは、skewY(a)のようにパラメータとして1つの値を指定します。
aがy軸の傾き角度になります。
元の座標系での(x,y)と新しい座標系での(x,y)は次のような関係になります。
新しい座標系でのx = 元の座標系でのx
新しい座標系でのy = tan(a) × 元の座標系でのx + 元の座標系でのy
例えば、
skewX(45)
のように書けば、
新しい座標系でのx = 元の座標系でのx
新しい座標系でのy = 1 × 元の座標系でのx + 元の座標系でのy
のようになり、元の座標系での(10,10)は新しい座標系の(10,20)になります。
skewX(a)はmatrix(1,tan(a),0,1,0,0)と同じ変換を表します。
aの単位は度です。
transform属性の値になります。
変換のリストは、半角スペース、カンマ(",")、あるいは半角スペースとカンマ(",")で区切られたいくつかの変換の組み合わせで表します。
変換には、
matrix(行列)、
translate(平行移動)、
scale(拡大縮小)、
rotate(回転)、
skewX(x軸の傾き)、
skewY(y軸の傾き)
があります。
matrixは、matrix(a b c d e f)のようにパラメータとして6つの値を指定します。
それぞれのパラメータの間は、カンマ(",")あるいは、半角スペース等(半角スペース以外にはタブや改行が該当します。文字コードで、#x20、#x9、#xD、#xAの4つ。)で区切ります。
元の座標系での(x,y)と新しい座標系での(x,y)は次のような関係になります。
新しい座標系でのx = a × 元の座標系でのx + c × 元の座標系でのy + e
新しい座標系でのy = b × 元の座標系でのx + d × 元の座標系でのy + f
例えば、
matrix(1,0,0,1,20,10)
のように書けば、
新しい座標系でのx = 1 × 元の座標系でのx + 20
新しい座標系でのy = 1 × 元の座標系でのy + 10
のようになり、元の座標系での(0,0)は新しい座標系の(20,10)になります。
translateは、translate(tx ty)のようにパラメータとして最大2つの値を指定します。
txがx軸方向の移動量、tyがy軸方向の移動量になります。
それぞれのパラメータの間は、カンマ(",")あるいは、半角スペース等(半角スペース以外にはタブや改行が該当します。文字コードで、#x20、#x9、#xD、#xAの4つ。)で区切ります。
元の座標系での(x,y)と新しい座標系での(x,y)は次のような関係になります。
新しい座標系でのx = 元の座標系でのx + tx
新しい座標系でのy = 元の座標系でのy + ty
例えば、
translate(20,10)
のように書けば、
新しい座標系でのx = 元の座標系でのx + 20
新しい座標系でのy = 元の座標系でのy + 10
のようになり、元の座標系での(0,0)は新しい座標系の(20,10)になります。
translate(tx, ty)はmatrix(1,0,0,1,tx,ty)と同じ変換を表します。
パラメータが1つしか指定されない場合は、tyが指定されないものとして扱われます。tyは指定されない場合は0として扱われます。
したがって、y軸方向の移動量が0の場合は省略できますが、y軸方向の移動量が0の場合は"0"と記述する必要があります。
scaleは、scale(sx sy)のようにパラメータとして最大2つの値を指定します。
sxがx軸方向の拡大率、syがy軸方向の拡大率になります。
それぞれのパラメータの間は、カンマ(",")あるいは、半角スペース等(半角スペース以外にはタブや改行が該当します。文字コードで、#x20、#x9、#xD、#xAの4つ。)で区切ります。
元の座標系での(x,y)と新しい座標系での(x,y)は次のような関係になります。
新しい座標系でのx = sx × 元の座標系でのx
新しい座標系でのy = sy × 元の座標系でのy
例えば、
scale(2,1)
のように書けば、
新しい座標系でのx = 2 × 元の座標系でのx
新しい座標系でのy = 1 × 元の座標系でのy
のようになり、元の座標系での(10,10)は新しい座標系の(20,10)になります。
scale(sx, sy)はmatrix(sx,0,0,sy,0,0)と同じ変換を表します。
パラメータが1つしか指定されない場合は、syが指定されないものとして扱われます。syは指定されない場合はsxと同じ値が指定されたものとして扱われます。
すなわち、y軸方向の拡大率と、y軸方向の拡大率は等しいものとして扱われます。
rotateは、rotate(a cx cy)のようにパラメータとして最大3つの値を指定します。
aが回転角度、cxが回転中心のx座標、cyが回転中心のy座標になります。
それぞれのパラメータの間は、カンマ(",")あるいは、半角スペース等(半角スペース以外にはタブや改行が該当します。文字コードで、#x20、#x9、#xD、#xAの4つ。)で区切ります。
元の座標系での(x,y)と新しい座標系での(x,y)は次のような関係になります。
新しい座標系でのx = cos(a) × 元の座標系でのx - sin(a) × 元の座標系でのy + (-cx × cos(a) + cy × sin(a) + cx)
新しい座標系でのy = sin(a) × 元の座標系でのx + cos(a) × 元の座標系でのy + (-cx × sin(a) - cy × cos(a) + cy)
例えば、
rotate(90, 10, 10)
のように書けば、
新しい座標系でのx = -1 × 元の座標系でのy + 10 × 1 + 10
新しい座標系でのy = 1 × 元の座標系でのx - 10 × 1 + 10
のようになり、元の座標系での(20,20)は新しい座標系の(0,20)になります。
回転中心が(0,0)の場合は、元の座標系での(x,y)と新しい座標系での(x,y)は次のような関係になります。
新しい座標系でのx = cos(a) × 元の座標系でのx - sin(a) × 元の座標系でのy
新しい座標系でのy = sin(a) × 元の座標系でのx + cos(a) × 元の座標系でのy
rotate(a cx cy)はmatrix(cos(a),sin(a),-sin(a),cos(a),-cx×cos(a)+cy×sin(a)+cx,-cx×sin(a)-cy×cos(a)+cy)と同じ変換を表します。
aの単位は度です。
パラメータが1つしか指定されない場合は、回転中心が指定されないものとして扱われます。回転中心は指定されない場合は回転中心は(0,0)として扱われます。
skewXは、skewX(a)のようにパラメータとして1つの値を指定します。
aがx軸の傾き角度になります。
元の座標系での(x,y)と新しい座標系での(x,y)は次のような関係になります。
新しい座標系でのx = 元の座標系でのx + tan(a) × 元の座標系でのy
新しい座標系でのy = 元の座標系でのy
例えば、
skewX(45)
のように書けば、
新しい座標系でのx = 元の座標系でのx + 1 × 元の座標系でのy
新しい座標系でのy = 元の座標系でのy
のようになり、元の座標系での(10,10)は新しい座標系の(20,10)になります。
skewX(a)はmatrix(1,0,tan(a),1,0,0)と同じ変換を表します。
aの単位は度です。
skewYは、skewY(a)のようにパラメータとして1つの値を指定します。
aがy軸の傾き角度になります。
元の座標系での(x,y)と新しい座標系での(x,y)は次のような関係になります。
新しい座標系でのx = 元の座標系でのx
新しい座標系でのy = tan(a) × 元の座標系でのx + 元の座標系でのy
例えば、
skewX(45)
のように書けば、
新しい座標系でのx = 元の座標系でのx
新しい座標系でのy = 1 × 元の座標系でのx + 元の座標系でのy
のようになり、元の座標系での(10,10)は新しい座標系の(10,20)になります。
skewX(a)はmatrix(1,tan(a),0,1,0,0)と同じ変換を表します。
aの単位は度です。