mozilla

Revision 421645 of transform-function

  • リビジョンの URL スラグ: Web/CSS/transform-function
  • リビジョンのタイトル: transform-function
  • リビジョンの ID: 421645
  • 作成日:
  • 作成者: ethertank
  • 現行リビジョン いいえ
  • コメント

このリビジョンの内容

{{draft}}

CSS のデータ型 <transform-function> は、要素の表現を普段と変えるために使う関数を表します。こうした transform 処理は通常行列で表現され、各点に行列の乗算を行った結果が描画されます。

2Dグラフィック用の座標

transform の定義に使われる座標系には何種類かあります。もっともよく使われるのはデカルト座標と同次座標です。

デカルト座標

coord_in_R2.png

デカルト座標 では、ユークリッド空間の各点は縦座標と横座標の2つの値で表します。原点である (0, 0)  は要素の左上隅です。通常の幾何学的な変換と違って、コンピュータグラフィックスの大半がそうであるように、Y軸 は下に向かって進みます。各点はベクトル表記 (x,y) で数学的に表します。

線形関数はすべて、次のような 2x2 の行列を使って表します:

ac bd

transform を用いると、各点と行列の乗算が行われます:

transform_functions_generic_transformation_cart.png.

同じ行に複数の transform を行えます:

transform_functions_transform_composition_cart.png.

この記法で、最もよく使われる以下の transform を記述でき、合成できます: 回転、拡大縮小、傾斜(skewing)。事実上、線形関数の transform をすべて表せます。線形ではなく、この記法では特例に分類される transform が、よく使われるtranslation (平行移動)です。translation のベクトル (tx, ty) を行列で表すには 2つ以上の引数に分けて表現しなければなりません。

射影幾何学 におけるメビウスの同次座標

3x3 の transform 行列は専門家以外には複雑で見慣れないものですが、線形関数で表現できるので移動の制限に悩まされることがなく、特例を考える必要がなくなります。

3D グラフィックス用の座標

transform を定義する関数

matrix()

CSS 関数 matrix() は6つの指定値からなる、同次2次元変換行列を定義します。こうした行列では引数として渡されない定数値が暗黙定義されています。その他の引数は列優先順に記述します。

matrix(a, b, c, d, tx, ty) は  matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1) の略記です。

註釈: Gecko (Firefox) は txty に {{xref_csslength}} 値を使えます。
現時点で、Webkit (Safari, Chrome) と Opera は txty に単位のない {{xref_cssnumber}} をサポートしています。

構文

matrix(a, b, c, d, tx, ty)

a b c d
線形 transform を表す {{xref_cssnumber}}
tx ty
移動量を表す {{xref_csslength}}
デカルト座標 on ℝ2 同次座標 on ℝℙ2 デカルト座標 on ℝ3 同次座標 on ℝℙ3
ac bd actybdtx001 actybdtx001 ac0txbd0ty00100001
[a b c d tx ty]

matrix3d()

CSS 関数 matrix3d() は 3次元の transform を 4x4 同次行列で表します。16 の引数を列優先順で記述します。

構文

matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)

a1 b1 c1 d1 a2 b2 c2 d2 a3 b3 c3 d3 d4
線形 transform を表す {{xref_cssnumber}} 値
a4 b4 c4
移動量を表す {{xref_csslength}} 値
デカルト座標 on ℝ2 同次座標 on ℝℙ2 デカルト座標 on ℝ3 同次座標 on ℝℙ3
この transform は 3次元空間に用いられます。この方式で表現できません translation は線形 transform でないので、デカルト座標の行列は 一般的な 3次元のアフィン変換を表せません a1a2a3a4b1b2b3b4c1c2c3c4d1d2d3d4

rotate()

transform-functions-rotate_19.5.pngCSS 関数 rotate() は、({{Cssxref("transform-origin")}}で指定された)定点を中心に、要素を変形させずに回転します。移動量は角度で指定します。正の値なら時計回りに、負の値なら反時計回りになります。180° の回転を 点反射(point reflection)と呼びます。

構文

rotate(a)

a
回転角度を表す {{xref_cssangle}} 値。正なら時計回り、負なら反時計回りになります。
デカルト座標 on ℝ2 同次座標 on ℝℙ2 デカルト座標 on ℝ3 同次座標 on ℝℙ3
cos(a)sin(a) -sin(a)cos(a)  cos(a)sin(a)0-sin(a)cos(a)0001  cos(a)sin(a)0-sin(a)cos(a)0001  cos(a)sin(a)00-sin(a)cos(a)0000100001
[cos(a) -sin(a) sin(a) cos(a) 0 0]

rotate3d()

CSS 関数 rotate3d()は、定軸を中心に要素を変形させずに回転させる transform を定義します。動きの量は角度で定義します。正なら時計回り、負なら反時計回りの動きになります。

3次元空間の回転は、回転の軸を表す任意の3つの角度を持ちます。回転軸は [x, y, z] ベクトルで定義され、原点({{cssxref("transform-origin")}} で定義されたもの)を通ります。ベクトルが正規化 されていなければ(3つの座標の自乗の合計が 1 でなければ)、内部で正規化されます。空ベクトル [0,0,0] のような正規化されていないベクトルを渡すと、CSS プロパティ全体の有効無効の判断をする前に、その回転が行われなくなります。

平面での回転と対照的に、3次元での回転の合成は通常非可換です。つまり回転を用いる順序に意味があります。

構文

rotate3d(x, y, z, a)

x
回転軸を示すベクトルの、X座標の {{xref_cssnumber}}
y
回転軸を示すベクトルの、Y座標の {{xref_cssnumber}}
z
回転軸を示すベクトルの、Z座標の {{xref_cssnumber}}
a
回転角度を示す{{xref_cssangle}}。正の角度は時計回り、負の角度は反時計回りです。
デカルト座標 on ℝ2 同次座標 on ℝℙ2 デカルト座標 on ℝ3 同次座標 on ℝℙ3
この transform は 3次元空間に用いられます。この方式で表現できません transform-functions-rotate3d_cart.png 1+(1-cos(a))(x2-1)z·sin(a)+xy(1-cos(a))-y·sin(a)+xz·(1-cos(a))-z·sin(a)+xy·(1-cos(a))1+(1-cos(a))(y2-1)x·sin(a)+yz·(1-cos(a))ysin(a) + xz(1-cos(a))-xsin(a)+yz(1-cos(a))1+(1-cos(a))(z2-1)t0001 transform-functions-rotate3d_hom4.png

rotateX()

CSS 関数 rotateX() は、要素を変形させずに、横座標を中心に回転します。移動量は角度で定義します。正なら時計回り、負なら反時計回りです。

回転軸は、{{cssxref("transform-origin")}} CSS プロパティで定義された原点を通ります。

rotateX(a)rotate3D(1, 0, 0, a) の略記法です。

平面での回転と対照的に、3次元での回転の合成は通常非可換です。つまり回転を用いる順序に意味があります。

構文

rotateX(a)

a
回転角度を示す {{xref_cssangle}}。正なら時計回り、負なら反時計回り
デカルト座標 on ℝ2 同次座標 on ℝℙ2 デカルト座標 on ℝ3 同次座標 on ℝℙ3
この transform は 3次元空間に用いられます。この方式で表現できません 1000cos(a)sin(a)0-sin(a)cos(a) 10000cos(a)sin(a)00-sin(a)cos(a)00001

rotateY()

CSS 関数 rotateY() は、要素を変形させずに、縦座標を中心に回転します。移動量は角度で定義します。正なら時計回り、負なら反時計回りです。

回転軸は、{{cssxref("transform-origin")}} CSS プロパティで定義された原点を通ります。

rotateY(a)rotate3D(0, 1, 0, a) の略記法です。

平面での回転と対照的に、3次元での回転の合成は通常非可換です。つまり回転を用いる順序に意味があります。

構文

rotateY(a)

a
回転角度を示す {{xref_cssangle}}。正なら時計回り、負なら反時計回り
デカルト座標 on ℝ2 同次座標 on ℝℙ2 デカルト座標 on ℝ3 同次座標 on ℝℙ3
この transform は 3次元空間に用いられます。この方式で表現できません cos(a)0sin(a)010-sin(a)0cos(a) cos(a)0sin(a)00100-sin(a)0cos(a)00001

rotateZ()

CSS 関数 rotateZ() は、要素を変形させずに、Z軸を中心に回転します。移動量は角度で定義します。正なら時計回り、負なら反時計回りです。

回転軸は、{{cssxref("transform-origin")}} CSS プロパティで定義された原点を通ります。

rotateZ(a)rotate3D(0, 0, 1, a) の略記法です。

平面での回転と対照的に、3次元での回転の合成は通常非可換です。つまり回転を用いる順序に意味があります。

構文

rotateZ(a)

a
回転角度を示す {{xref_cssangle}}。正なら時計回り、負なら反時計回り
デカルト座標 on ℝ2 同次座標 on ℝℙ2 デカルト座標 on ℝ3 同次座標 on ℝℙ3
この transform は 3次元空間に用いられます。この方式で表現できません cos(a)sin(a)0-sin(a)cos(a)0001 cos(a)sin(a)00-sin(a)cos(a)0000000001

scale()

transform-functions-scale_2_2.png

CSS 関数 scale() は要素の大きさを変更します。大きさを増やすか減らすことができ、その量はベクトルで定義され、可能であれば多方向よりも 1方向に変更が行われます。

この transform の特徴は、各方向への拡大縮小量を決めるベクトルで決まります。ベクトルの両方の座標が同じなら、均一で等方性の拡大縮小が行われ、要素の形状は保たれます。この場合 scale 関数は homothetic な transform を定義しています。

]-1, 1[ の範囲を超えていると、座標方向に要素を拡大します。範囲内なら、その方向に要素を縮小します。 1 なら何もしません。負の値なら、点反射(point reflection) とサイズの変更を行います。

scale() 関数は(2次元の)ユークリッド平面の transform だけを適用します。空間で拡大縮小するには scale3D() 関数を使う必要があります。

構文

scale(sx) または
scale(sx, sy)

sx
拡大縮小ベクトルの横座標を表す {{xref_cssnumber}}
sy
拡大縮小ベクトルの縦座標を表す {{xref_cssnumber}}。値を与えない場合のデフォルトは sx で、この結果要素の形状を保つ均一な拡大縮小が行われます。
デカルト座標 on ℝ2 同次座標 on ℝℙ2 デカルト座標 on ℝ3 同次座標 on ℝℙ3
sx0 0sy sx000sy0001 sx000sy0001 sx0000sy0000100001
[sx 0 0 sy 0 0]

scale3d()

CSS 関数 scale3d() は要素の大きさを変更します。拡大縮小の量はベクトルで定義され、拡大率を変えて別の大きさにすることができます。

この transform の特徴は、各方向への拡大率を表すベクトルで決まります。ベクトルの 3つの座標すべてが同じなら、拡大縮小は要素の形状を保ちながら均一に、等方性を持って行われます。、均一で等方性の拡大縮小が行われ、要素の形状は保たれます。この場合 scale 関数は homothetic な transform を定義しています。

]-1, 1[ の範囲を超えていると、座標方向に要素を拡大します。範囲内なら、その方向に要素を縮小します。 1 なら何もしません。負の値なら、点反射(point reflection) とサイズの変更を行います。

構文

scale3d(sx, sy, sz)

sx
拡大縮小ベクトルの横座標を表す {{xref_cssnumber}}
sy
拡大縮小ベクトルの縦座標を表す {{xref_cssnumber}}
sz
拡大縮小ベクトルの Z成分を表す {{xref_cssnumber}}
デカルト座標 on ℝ2 同次座標 on ℝℙ2 デカルト座標 on ℝ3 同次座標 on ℝℙ3
この transform は 3次元空間に用いられます。この方式で表現できません sx000sy000sz sx0000sy0000sz00001
 

scaleX()

transform-functions-scaleX_2.pngCSS 関数 scaleX() は要素の各点の横座標を変更します。ただし拡大率が 1 のときは恒等変換になります。拡大縮小は等方性を持たず、要素の角度は保たれません。

scaleX(sx)scale(sx, 1)scale3d(sx, 1, 1) の略記法です。

scaleX(-1) は、原点を通る縦方向の軸を中心とした 線対称 を定義します(原点は transform-origin プロパティで定義されます)。

構文

scaleX(s)

s
要素の各点の横座標に使う拡大縮小率を示す {{xref_cssnumber}}
デカルト座標 on ℝ2 同次座標 on ℝℙ2 デカルト座標 on ℝ3 同次座標 on ℝℙ3
s0 01 s00010001 s00010001 s000010000100001
[s 0 0 1 0 0]

scaleY()

transform-functions-scaleY_2.png

CSS 関数 scaleY() は要素の各点の縦座標を変更します。ただし拡大率が 1 のときは恒等変換になります。拡大縮小は等方性を持たず、要素の角度は保たれません。

scaleY(sy)scale(1, sy)scale3d(1, sy, 1) の略記法です。

scaleY(-1) は、原点を通る横方向の軸を中心とした 線対称 を定義します(原点は transform-origin プロパティで定義されます)。

構文

scaleY(s)

s
要素の各点の縦座標に使う拡大縮小率を示す {{xref_cssnumber}}
デカルト座標 on ℝ2 同次座標 on ℝℙ2 デカルト座標 on ℝ3 同次座標 on ℝℙ3
 10 0s 1000s0001 1000s0001 10000s0000100001
[1 0 0 s 0 0]

scaleZ()

CSS 関数 scaleZ() は要素の各点の Z座標を変更します。ただし拡大率が 1 のときは恒等変換になります。拡大縮小は等方性を持たず、要素の角度は保たれません。

scaleZ(sz)scale3d(1, 1, sz) の略記法です。

scaleZ(-1) は、原点を通る Z軸を中心とした 線対称 を定義します(原点は transform-origin プロパティで定義されます)。

構文

scaleZ(s)

s
要素の各点の Z成分に使う拡大縮小率を示す {{xref_cssnumber}}
デカルト座標 on ℝ2 同次座標 on ℝℙ2 デカルト座標 on ℝ3 同次座標 on ℝℙ3
この transform は 3次元空間に用いられます。この方式で表現できません 10001000s 1000010000s00001
 

skew()

{{non-standard_header}}

CSS 関数 skew() はせん断マッピング(shear mapping または transvection)を行います。要素の各点を各方向に一定角度ひずませます。 これは各座標値に指定角度と原点からの距離に比例する値を足すことで行われます。原点から離れるほど大きな値が足されます。

註釈: skew() 関数は初期の草案にありました。その後取り除かれましたが、一部のプレフィックス付きの実装にまだ残っています。これは使わないようにしてください。

同じ効果を得るためには、skew() に引数を1つだけ渡して使っていたなら skewX() を使うことができます。それ以外では matrix(1, tan(ax), tan(ay), 1, 0, 0)が汎用的に使えます。ここで tan() は CSS関数ではなく、自分で計算する必要があることに注意してください。

構文

skew(ax)       or
skew(ax, ay)

ax
要素を横座標に沿ってひずませるのに使う {{xref_cssangle}}
ay
要素を縦座標に沿ってひずませるのに使う {{xref_cssangle}}
デカルト座標 on ℝ2 同次座標 on ℝℙ2 デカルト座標 on ℝ3 同次座標 on ℝℙ3
1tan(ax)tan(ay)1 1tan(ax)0tan(ay)10001 1tan(ax)0tan(ay)10001 1tan(ax)00tan(ay)10000100001
[1 tan(ay) tan(ax) 1 0 0]

skewX()

CSS 関数 skewX() は横方向のせん断マッピング行って、要素の各点を横方向に一定角度ひずませます。 これは横座標値に指定角度と原点からの距離に比例する値を足すことで行われます。原点から離れるほど大きな値が足されます。

構文

skewX(a)

a
要素を横座標に沿ってひずませるのに使う {{xref_cssangle}}
デカルト座標 on ℝ2 同次座標 on ℝℙ2 デカルト座標 on ℝ3 同次座標 on ℝℙ3
1tan(ay)01 1tan(ay)0010001 1tan(ay)0010001 1tan(ay)00010000100001
[1 0 tan(a) 1 0 0]

skewY()

CSS 関数 skewY() は縦方向のせん断マッピング行って、要素の各点を縦方向に一定角度ひずませます。 これは縦座標値に指定角度と原点からの距離に比例する値を足すことで行われます。原点から離れるほど大きな値が足されます。

構文

skewY(a)

a
要素を縦座標に沿ってひずませるのに使う {{xref_cssangle}}
デカルト座標 on ℝ2 同次座標 on ℝℙ2 デカルト座標 on ℝ3 同次座標 on ℝℙ3
10tan(ax)1 100tan(ax)10001 100tan(ax)10001 1000tan(ax)10000100001
[1 tan(a) 0 1 0 0]

translate()

transform-functions-translate_2.pngCSS 関数 translate() は平面上の要素位置を動かします。この transform の特徴は、各方向への移動量を決めるベクトルの座標で決まります。

構文

translate(tx)       or
translate(tx, ty)

tx
translateベクトルの横座標を示す {{xref_csslength}}
ty
translateベクトルの縦座標を示す {{xref_csslength}}。省略すると tx と同じ値になります。 translate(2)translate(2, 2) と同じです。
デカルト座標 on ℝ2 同次座標 on ℝℙ2 デカルト座標 on ℝ3 同次座標 on ℝℙ3

2 の translate は線形 transform ではなく、デカルト座標系の行列で表現できません

10tx01ty001 10tx01ty001 100tx010ty00100001
[1 0 0 1 tx ty]

translate3d()

CSS 関数 translate3d() は 3D空間内で要素位置を動かします。この transform の特徴は、各方向への移動量を決める 3次元ベクトルの座標で決まります。

構文

translate3d(tx, ty, tz)

tx
translateベクトルの横座標を示す {{xref_csslength}}
ty
translateベクトルの縦座標を示す {{xref_csslength}}
tz
translateベクトルの Z成分を示す {{xref_csslength}}。{{xref_csspercentage}} 値は使えません。この場合この transform を含むプロパティが無効とみなされます。
デカルト座標 on ℝ2 同次座標 on ℝℙ2 デカルト座標 on ℝ3 同次座標 on ℝℙ3

この transform は 3次元空間に用いられます。この方式で表現できません

3 の translate は線形 transform ではなく、デカルト座標系の行列で表現できません 100tx010ty001tz0001

translateX()

transform-functions-translateX_2.pngCSS 関数 translateX() は平面上の要素を横方向に動かします。この transform の特徴は、横方向への移動量を決める {{xref_csslength}} で決まります。

translateX(tx)translate(tx, 0) の略記法です。

構文

translateX(t)

t
translate ベクトルの横座標を示す {{xref_csslength}}
デカルト座標 on ℝ2 同次座標 on ℝℙ2 デカルト座標 on ℝ3 同次座標 on ℝℙ3

2 の translate は線形 transform ではなく、デカルト座標系の行列で表現できません

10t010001 10t010001 100t010000100001
[1 0 0 1 t 0]

translateY()

transform-functions-translateY_2.pngCSS 関数 translateY() は平面上の要素を縦方向に動かします。この transform の特徴は、縦方向への移動量を決める {{xref_csslength}} で決まります。

translateY(ty)translate(0, ty) の略記法です。

構文

translateY(t)

t
translate ベクトルの縦座標を表す {{xref_csslength}}
デカルト座標 on ℝ2 同次座標 on ℝℙ2 デカルト座標 on ℝ3 同次座標 on ℝℙ3

2 の translate は線形 transform ではなく、デカルト座標系の行列で表現できません

10001t001 10001t001 1000010t00100001
[1 0 0 1 0 t]

translateZ()

CSS 関数 translateZ() は要素を3次元空間の Z軸に沿って動かします。この transform の特徴は、移動量を決める {{xref_csslength}} で決まります。

translateZ(tz)translate3d(0, 0, tz) の略記法です。

構文

translateZ(t)

t
translate ベクトルの Z成分を表す {{xref_csslength}}。{{xref_csspercentage}} 値は使えません。この場合この transform を含むプロパティが無効とみなされます。
デカルト座標 on ℝ2 同次座標 on ℝℙ2 デカルト座標 on ℝ3 同次座標 on ℝℙ3
この transform は 3次元空間に用いられます。この方式で表現できません

3 の translate は線形 transform ではなく、デカルト座標系の行列で表現できません

10000100001t0001

このリビジョンのソースコード

<div>{{draft}}</div>
<p>CSS のデータ型 <code>&lt;transform-function&gt;</code> は、要素の表現を普段と変えるために使う関数を表します。こうした transform 処理は通常行列で表現され、各点に行列の乗算を行った結果が描画されます。</p>
<h2 id="Coordinates_for_2D_graphics" name="Coordinates_for_2D_graphics">2Dグラフィック用の座標</h2>
<p>transform の定義に使われる座標系には何種類かあります。もっともよく使われるのはデカルト座標と同次座標です。</p>
<h3 id="Cartesian_coordinates" name="Cartesian_coordinates"><span>デカルト座標</span></h3>
<p><a href="/@api/deki/files/5796/=coord_in_R2.png" title="coord_in_R2.png"><img alt="coord_in_R2.png" class="internal rwrap" src="/files/3438/coord_in_R2.png" style="width: 171px; height: 183px; float: right;" /></a></p>
<p><a href="http://ja.wikipedia.org/wiki/%E7%9B%B4%E4%BA%A4%E5%BA%A7%E6%A8%99%E7%B3%BB" title="http://en.wikipedia.org/wiki/Cartesian_coordinate_system">デカルト座標</a> では、ユークリッド空間の各点は縦座標と横座標の2つの値で表します。原点である <code>(0, 0)</code>&nbsp; は要素の左上隅です。通常の幾何学的な変換と違って、コンピュータグラフィックスの大半がそうであるように、Y軸 は下に向かって進みます。各点はベクトル表記 <code>(x,y)</code> で数学的に表します。</p>
<p>線形関数はすべて、次のような 2x2 の行列を使って表します:</p>
<div style="text-align: center;">
  <p><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd></mtr> <mtr><mtd>b</mtd><mtd>d</mtd></mtr> </mtable> </mfenced> </math></p>
</div>
<p>transform を用いると、各点と行列の乗算が行われます:</p>
<div style="text-align: center;">
  <a href="/@api/deki/files/5799/=transform_functions_generic_transformation_cart.png" title="transform_functions_generic_transformation_cart.png"><img alt="transform_functions_generic_transformation_cart.png" class="internal default" src="/@api/deki/files/5799/=transform_functions_generic_transformation_cart.png?size=webview" style="width: 189px; height: 32px;" /></a>.</div>
<p>同じ行に複数の transform を行えます:</p>
<div style="text-align: center;">
  <a href="/@api/deki/files/5800/=transform_functions_transform_composition_cart.png" title="transform_functions_transform_composition_cart.png"><img alt="transform_functions_transform_composition_cart.png" class="internal default" src="/@api/deki/files/5800/=transform_functions_transform_composition_cart.png?size=webview" style="width: 313px; height: 32px;" /></a>.</div>
<p>この記法で、最もよく使われる以下の transform を記述でき、合成できます: 回転、拡大縮小、傾斜(skewing)。事実上、線形関数の transform をすべて表せます。線形ではなく、この記法では特例に分類される transform が、よく使われるtranslation (平行移動)です。translation のベクトル (tx, ty) を行列で表すには 2つ以上の引数に分けて表現しなければなりません。</p>
<h3 id="M.C3.B6bius'_homogenous_coordinates_in_projective_geometry" name="M.C3.B6bius'_homogenous_coordinates_in_projective_geometry"><a href="http://ja.wikipedia.org/wiki/%E5%B0%84%E5%BD%B1%E5%B9%BE%E4%BD%95%E5%AD%A6" title="http://en.wikipedia.org/wiki/Projective_geometry">射影幾何学</a> における<a href="http://ja.wikipedia.org/wiki/%E5%B0%84%E5%BD%B1%E7%A9%BA%E9%96%93" title="http://ja.wikipedia.org/wiki/%E5%B0%84%E5%BD%B1%E7%A9%BA%E9%96%93">メビウスの同次座標</a></h3>
<p>3x3 の transform 行列は専門家以外には複雑で見慣れないものですが、線形関数で表現できるので移動の制限に悩まされることがなく、特例を考える必要がなくなります。</p>
<h2 id="Coordinates_for_3D_graphics" name="Coordinates_for_3D_graphics">3D グラフィックス用の座標</h2>
<h2 id="Functions_defining_transformations" name="Functions_defining_transformations">transform を定義する関数</h2>
<h3 id="matrix()" name="matrix()"><code>matrix()</code></h3>
<p>CSS 関数 <code>matrix()</code> は6つの指定値からなる、同次2次元変換行列を定義します。こうした行列では引数として渡されない定数値が暗黙定義されています。その他の引数は列優先順に記述します。</p>
<p><code>matrix(a, b, c, d, tx, ty)</code> は&nbsp; <code>matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1)</code> の略記です。</p>
<div class="note">
  <strong>註釈:</strong> Gecko (Firefox) は <strong>tx</strong> と <strong>ty</strong> に {{xref_csslength}} 値を使えます。<br />
  現時点で、Webkit (Safari, Chrome) と Opera は <strong>tx</strong> と <strong>ty</strong> に単位のない {{xref_cssnumber}} をサポートしています。</div>
<h4 id="Syntax" name="Syntax">構文</h4>
<pre class="syntaxbox">
matrix(<em>a</em>, <em>b</em>, <em>c</em>, <em>d</em>, <em>tx</em>, <em>ty</em>)
</pre>
<h4 id="Values" name="Values">値</h4>
<dl>
  <dt><em>a</em> <em>b</em> <em>c</em> <em>d</em></dt>
  <dd>線形 transform を表す {{xref_cssnumber}}</dd>
  <dt><em>tx</em> <em>ty</em></dt>
  <dd>移動量を表す {{xref_csslength}}</dd>
</dl>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">デカルト座標 on ℝ<sup>2</sup></th>
      <th scope="col">同次座標 on ℝℙ<sup>2</sup></th>
      <th scope="col">デカルト座標 on ℝ<sup>3</sup></th>
      <th scope="col">同次座標 on ℝℙ<sup>3</sup></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd></mtr> <mtr><mtd>b</mtd><mtd>d</mtd></mtr> </mtable> </mfenced> </math></td>
      <td><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd><mtd>ty</mtd></mtr><mtr><mtd>b</mtd><mtd>d</mtd><mtd>tx</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
      <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd><mtd>ty</mtd></mtr><mtr><mtd>b</mtd><mtd>d</mtd><mtd>tx</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
      <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd><mtd>0</mtd><mtd>tx</mtd></mtr><mtr><mtd>b</mtd><mtd>d</mtd><mtd>0</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
    </tr>
    <tr>
      <td><code>[a b c d tx ty]</code></td>
    </tr>
  </tbody>
</table>
<h3 id="matrix3d()" name="matrix3d()"><code>matrix3d()</code></h3>
<p>CSS 関数 <code>matrix3d()</code> は 3次元の transform を 4x4 同次行列で表します。16 の引数を列優先順で記述します。</p>
<h4 id="Syntax" name="Syntax">構文</h4>
<pre class="syntaxbox">
matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)</pre>
<h4 id="Values" name="Values">値</h4>
<dl>
  <dt><em>a1 b1 c1 d1</em> <em>a2 b2 c2 d2 </em><em>a3 b3 c3 d3</em> <em>d4</em></dt>
  <dd>線形 transform を表す {{xref_cssnumber}} 値</dd>
  <dt><em>a4</em> <em>b4 c4</em></dt>
  <dd>移動量を表す {{xref_csslength}} 値</dd>
</dl>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">デカルト座標 on ℝ<sup>2</sup></th>
      <th scope="col">同次座標 on ℝℙ<sup>2</sup></th>
      <th scope="col">デカルト座標 on ℝ<sup>3</sup></th>
      <th scope="col">同次座標 on ℝℙ<sup>3</sup></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="2" rowspan="2">この transform は 3次元空間に用いられます。この方式で表現できません</td>
      <td colspan="1" rowspan="2">translation は線形 transform でないので、デカルト座標の行列は 一般的な 3次元のアフィン変換を表せません</td>
      <td colspan="1" rowspan="2"><math><mfenced><mtable><mtr><mtd>a1</mtd><mtd>a2</mtd><mtd>a3</mtd><mtd>a4</mtd></mtr><mtr><mtd>b1</mtd><mtd>b2</mtd><mtd>b3</mtd><mtd>b4</mtd></mtr><mtr><mtd>c1</mtd><mtd>c2</mtd><mtd>c3</mtd><mtd>c4</mtd></mtr><mtr><mtd>d1</mtd><mtd>d2</mtd><mtd>d3</mtd><mtd>d4</mtd></mtr></mtable> </mfenced> </math></td>
    </tr>
  </tbody>
</table>
<h3 id="rotate()" name="rotate()"><code>rotate()</code></h3>
<p><img align="left" alt="transform-functions-rotate_19.5.png" class="internal lwrap" src="/@api/deki/files/5976/=transform-functions-rotate_19.5.png" />CSS 関数 <code>rotate()</code> は、({{Cssxref("transform-origin")}}で指定された)定点を中心に、要素を変形させずに回転します。移動量は角度で指定します。正の値なら時計回りに、負の値なら反時計回りになります。180° の回転を <em>点反射(point reflection)</em>と呼びます。</p>
<h4 id="Syntax" style="clear:left;">構文</h4>
<pre class="syntaxbox">
rotate(<em>a</em>)
</pre>
<h4 id="Values" name="Values">値</h4>
<dl>
  <dt><em>a</em></dt>
  <dd>回転角度を表す {{xref_cssangle}} 値。正なら時計回り、負なら反時計回りになります。</dd>
</dl>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">デカルト座標 on ℝ<sup>2</sup></th>
      <th scope="col">同次座標 on ℝℙ<sup>2</sup></th>
      <th scope="col">デカルト座標 on ℝ<sup>3</sup></th>
      <th scope="col">同次座標 on ℝℙ<sup>3</sup></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>cos(a)</mtd><mtd>sin(a)</mtd></mtr> <mtr><mtd>-sin(a)</mtd><mtd>cos(a)</mtd></mtr></mtable></mfenced></math></td>
      <td><math>&nbsp;<mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>-sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
      <td colspan="1" rowspan="2"><math>&nbsp;<mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>-sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
      <td colspan="1" rowspan="2"><math>&nbsp;<mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>sin(a)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>-sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
    </tr>
    <tr>
      <td><code>[cos(a) -sin(a) sin(<em>a</em>) cos(<em>a</em>) 0 0]</code></td>
    </tr>
  </tbody>
</table>
<h3 id="rotate3d()" name="rotate3d()"><code>rotate3d()</code></h3>
<p>CSS 関数 <code>rotate3d()</code>は、定軸を中心に要素を変形させずに回転させる transform を定義します。動きの量は角度で定義します。正なら時計回り、負なら反時計回りの動きになります。</p>
<p>3次元空間の回転は、回転の軸を表す任意の3つの角度を持ちます。回転軸は [x, y, z] ベクトルで定義され、原点({{cssxref("transform-origin")}} で定義されたもの)を通ります。ベクトルが<em>正規化</em> されていなければ(3つの座標の自乗の合計が 1 でなければ)、内部で正規化されます。空ベクトル [0,0,0] のような正規化されていないベクトルを渡すと、CSS プロパティ全体の有効無効の判断をする前に、その回転が行われなくなります。</p>
<div class="note">
  平面での回転と対照的に、3次元での回転の合成は通常非可換です。つまり回転を用いる順序に意味があります。</div>
<h4 id="Syntax" style="clear:left;">構文</h4>
<pre class="syntaxbox">
rotate3d(<em>x</em>, <em>y</em>, <em>z</em>, <em>a</em>)
</pre>
<h4 id="Values" name="Values">値</h4>
<dl>
  <dt><em>x</em></dt>
  <dd>回転軸を示すベクトルの、X座標の {{xref_cssnumber}}</dd>
  <dt><em>y</em></dt>
  <dd>回転軸を示すベクトルの、Y座標の {{xref_cssnumber}}</dd>
  <dt><em>z</em></dt>
  <dd>回転軸を示すベクトルの、Z座標の {{xref_cssnumber}}</dd>
  <dt><em>a</em></dt>
  <dd>回転角度を示す{{xref_cssangle}}。正の角度は時計回り、負の角度は反時計回りです。</dd>
</dl>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">デカルト座標 on ℝ<sup>2</sup></th>
      <th scope="col">同次座標 on ℝℙ<sup>2</sup></th>
      <th scope="col">デカルト座標 on ℝ<sup>3</sup></th>
      <th scope="col">同次座標 on ℝℙ<sup>3</sup></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="2">この transform は 3次元空間に用いられます。この方式で表現できません</td>
      <td colspan="1"><a href="/@api/deki/files/5987/=transform-functions-rotate3d_cart.png" title="transform-functions-rotate3d_cart.png"><img alt="transform-functions-rotate3d_cart.png" class="internal default" src="/@api/deki/files/5987/=transform-functions-rotate3d_cart.png?size=webview" style="width: 510px; height: 47px;" /></a><math> <mfenced><mtable><mtr><mtd>1<mo>+</mo>(1<mo>-</mo>cos(<mi>a</mi>))(<msup><mi>x</mi><mn>2</mn></msup><mo>-</mo>1)</mtd><mtd><mi>z</mi><mo>·</mo>sin(<mi>a</mi>)+<mi>x</mi><mi>y</mi>(1<mo>-</mo>cos(<mi>a</mi>))</mtd><mtd><mo>-</mo><mi>y</mi><mo>·</mo>sin(<mi>a</mi>)<mo>+</mo><mi>x</mi><mi>z</mi><mo>·</mo>(1<mo>-</mo>cos(<mi>a</mi>))</mtd></mtr><mtr><mtd><mo>-</mo><mi>z</mi><mo>·</mo>sin(<mi>a</mi>)<mo>+</mo><mi>x</mi><mi>y</mi><mo>·</mo>(1<mo>-</mo>cos(<mi>a</mi>))</mtd><mtd>1+(1-cos(a))(y2-1)</mtd><mtd><mi>x</mi><mo>·</mo>sin(<mi>a</mi>)<mo>+</mo><mi>y</mi><mi>z</mi><mo>·</mo>(1<mo>-</mo>cos(<mi>a</mi>))</mtd><mtr><mtd>ysin(a) + xz(1-cos(a))</mtd><mtd>-xsin(a)+yz(1-cos(a))</mtd><mtd>1+(1-cos(a))(z2-1)</mtd><mtd>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr> </mtr></mtable></mfenced></math></td>
      <td colspan="1"><a href="/@api/deki/files/5986/=transform-functions-rotate3d_hom4.png" title="transform-functions-rotate3d_hom4.png"><img alt="transform-functions-rotate3d_hom4.png" class="internal default" src="/@api/deki/files/5986/=transform-functions-rotate3d_hom4.png?size=webview" style="width: 522px; height: 61px;" /></a></td>
    </tr>
  </tbody>
</table>
<h3 id="rotateX()" name="rotateX()"><code>rotateX()</code></h3>
<p>CSS 関数 <code>rotateX()</code> は、要素を変形させずに、横座標を中心に回転します。移動量は角度で定義します。正なら時計回り、負なら反時計回りです。</p>
<p>回転軸は、{{cssxref("transform-origin")}} CSS プロパティで定義された原点を通ります。</p>
<p><code>rotateX(a)</code> は <code>rotate3D(1, 0, 0, a)</code> の略記法です。</p>
<div class="note">
  平面での回転と対照的に、3次元での回転の合成は通常非可換です。つまり回転を用いる順序に意味があります。</div>
<h4 id="Syntax" style="clear:left;">構文</h4>
<pre class="syntaxbox">
rotateX(<em>a</em>)
</pre>
<h4 id="Values" name="Values">値</h4>
<dl>
  <dt><em>a</em></dt>
  <dd>回転角度を示す {{xref_cssangle}}。正なら時計回り、負なら反時計回り</dd>
</dl>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">デカルト座標 on ℝ<sup>2</sup></th>
      <th scope="col">同次座標 on ℝℙ<sup>2</sup></th>
      <th scope="col">デカルト座標 on ℝ<sup>3</sup></th>
      <th scope="col">同次座標 on ℝℙ<sup>3</sup></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="2">この transform は 3次元空間に用いられます。この方式で表現できません</td>
      <td colspan="1"><math> <mfenced><mtable><mtr><mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>cos(a)</mtd><mtd>sin(a)</mtd></mtr><mtr><mtd>0</mtd><mtd>-sin(a)</mtd><mtd>cos(a)</mtd></mtr></mtable> </mfenced> </math></td>
      <td colspan="1"><math><mfenced><mtable><mtr><mtd>1</mtd><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>cos(a)</mtd><mtd>sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>-sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
    </tr>
  </tbody>
</table>
<h3 id="rotateY()" name="rotateY()"><code>rotateY()</code></h3>
<p>CSS 関数 <code>rotateY()</code> は、要素を変形させずに、縦座標を中心に回転します。移動量は角度で定義します。正なら時計回り、負なら反時計回りです。</p>
<p>回転軸は、{{cssxref("transform-origin")}} CSS プロパティで定義された原点を通ります。</p>
<p><code>rotateY(a)</code> は <code>rotate3D(0, 1, 0, a)</code> の略記法です。</p>
<div class="note">
  平面での回転と対照的に、3次元での回転の合成は通常非可換です。つまり回転を用いる順序に意味があります。</div>
<h4 id="Syntax" style="clear:left;">構文</h4>
<pre class="syntaxbox">
rotateY(<em>a</em>)
</pre>
<h4 id="Values" name="Values">値</h4>
<dl>
  <dt><em>a</em></dt>
  <dd>回転角度を示す {{xref_cssangle}}。正なら時計回り、負なら反時計回り</dd>
</dl>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">デカルト座標 on ℝ<sup>2</sup></th>
      <th scope="col">同次座標 on ℝℙ<sup>2</sup></th>
      <th scope="col">デカルト座標 on ℝ<sup>3</sup></th>
      <th scope="col">同次座標 on ℝℙ<sup>3</sup></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="2">この transform は 3次元空間に用いられます。この方式で表現できません</td>
      <td colspan="1"><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>0</mtd><mtd>sin(a)</mtd></mtr><mtr><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>-sin(a)</mtd><mtd>0</mtd><mtd>cos(a)</mtd></mtr></mtable> </mfenced> </math></td>
      <td colspan="1"><math><mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>0</mtd><mtd>sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>-sin(a)</mtd><mtd>0</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
    </tr>
  </tbody>
</table>
<h3 id="rotateZ()" name="rotateZ()"><code>rotateZ()</code></h3>
<p>CSS 関数 <code>rotateZ()</code> は、要素を変形させずに、Z軸を中心に回転します。移動量は角度で定義します。正なら時計回り、負なら反時計回りです。</p>
<p>回転軸は、{{cssxref("transform-origin")}} CSS プロパティで定義された原点を通ります。</p>
<p><code>rotateZ(a)</code> は <code>rotate3D(0, 0, 1, a)</code> の略記法です。</p>
<div class="note">
  平面での回転と対照的に、3次元での回転の合成は通常非可換です。つまり回転を用いる順序に意味があります。</div>
<h4 id="Syntax" style="clear:left;">構文</h4>
<pre class="syntaxbox">
rotateZ(<em>a</em>)
</pre>
<h4 id="Values" name="Values">値</h4>
<dl>
  <dt><em>a</em></dt>
  <dd>回転角度を示す {{xref_cssangle}}。正なら時計回り、負なら反時計回り</dd>
</dl>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">デカルト座標 on ℝ<sup>2</sup></th>
      <th scope="col">同次座標 on ℝℙ<sup>2</sup></th>
      <th scope="col">デカルト座標 on ℝ<sup>3</sup></th>
      <th scope="col">同次座標 on ℝℙ<sup>3</sup></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="2" rowspan="2">この transform は 3次元空間に用いられます。この方式で表現できません</td>
      <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>-sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
      <td colspan="1" rowspan="2"><math><mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>sin(a)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>-sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
    </tr>
  </tbody>
</table>
<h3 id="scale()" name="scale()"><code>scale()</code></h3>
<p><img align="left" alt="transform-functions-scale_2_2.png" class="internal lwrap" src="/@api/deki/files/5804/=transform-functions-scale_2_2.png?size=webview" style="width: 350px; height: 290px;" /></p>
<p>CSS 関数 <code>scale()</code> は要素の大きさを変更します。大きさを増やすか減らすことができ、その量はベクトルで定義され、可能であれば多方向よりも 1方向に変更が行われます。</p>
<p>この transform の特徴は、各方向への拡大縮小量を決めるベクトルで決まります。ベクトルの両方の座標が同じなら、均一で等方性の拡大縮小が行われ、要素の形状は保たれます。この場合 scale 関数は homothetic な transform を定義しています。</p>
<p><code>]-1, 1[</code> の範囲を超えていると、座標方向に要素を拡大します。範囲内なら、その方向に要素を縮小します。 <code>1</code> なら何もしません。負の値なら、<em>点反射(point reflection)</em> とサイズの変更を行います。</p>
<div class="note" style="clear:left;">
  <code>scale</code><code>()</code> 関数は(2次元の)ユークリッド平面の transform だけを適用します。空間で拡大縮小するには <code>scale3D()</code> 関数を使う必要があります。</div>
<h4 id="Syntax" style="clear:left;">構文</h4>
<pre class="syntaxbox">
scale(<em>sx</em>) または
scale(<em>sx</em>, <em>sy</em>)
</pre>
<h4 id="Values" name="Values">値</h4>
<dl>
  <dt><em>sx</em></dt>
  <dd>拡大縮小ベクトルの横座標を表す {{xref_cssnumber}}</dd>
  <dt><em>sy</em></dt>
  <dd>拡大縮小ベクトルの縦座標を表す {{xref_cssnumber}}。値を与えない場合のデフォルトは <em><strong>sx</strong></em> で、この結果要素の形状を保つ均一な拡大縮小が行われます。</dd>
</dl>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">デカルト座標 on ℝ<sup>2</sup></th>
      <th scope="col">同次座標 on ℝℙ<sup>2</sup></th>
      <th scope="col">デカルト座標 on ℝ<sup>3</sup></th>
      <th scope="col">同次座標 on ℝℙ<sup>3</sup></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>sx</mtd><mtd>0</mtd></mtr> <mtr><mtd>0</mtd><mtd>sy</mtd></mtr> </mtable> </mfenced> </math></td>
      <td><math> <mfenced><mtable><mtr>sx<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>sy</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
      <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>sx<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>sy</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
      <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>sx<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>sy</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
    </tr>
    <tr>
      <td><code>[sx 0 0 sy 0 0]</code></td>
    </tr>
  </tbody>
</table>
<h3 id="scale3d()" name="scale3d()"><code>scale3d()</code></h3>
<p>CSS 関数 <code>scale3d()</code> は要素の大きさを変更します。拡大縮小の量はベクトルで定義され、拡大率を変えて別の大きさにすることができます。</p>
<p>この transform の特徴は、各方向への拡大率を表すベクトルで決まります。ベクトルの 3つの座標すべてが同じなら、拡大縮小は要素の形状を保ちながら均一に、等方性を持って行われます。、均一で等方性の拡大縮小が行われ、要素の形状は保たれます。この場合 scale 関数は homothetic な transform を定義しています。</p>
<p><code>]-1, 1[</code> の範囲を超えていると、座標方向に要素を拡大します。範囲内なら、その方向に要素を縮小します。 <code>1</code> なら何もしません。負の値なら、<em>点反射(point reflection)</em> とサイズの変更を行います。</p>
<h4 id="Syntax" style="clear:left;">構文</h4>
<pre class="syntaxbox">
scale3d(<em>sx</em>, <em>sy</em>, <em>sz</em>)
</pre>
<h4 id="Values" name="Values">値</h4>
<dl>
  <dt><em>sx</em></dt>
  <dd>拡大縮小ベクトルの横座標を表す {{xref_cssnumber}}</dd>
  <dt><em>sy</em></dt>
  <dd>拡大縮小ベクトルの縦座標を表す {{xref_cssnumber}}</dd>
  <dt><em>sz</em></dt>
  <dd>拡大縮小ベクトルの Z成分を表す {{xref_cssnumber}}</dd>
</dl>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">デカルト座標 on ℝ<sup>2</sup></th>
      <th scope="col">同次座標 on ℝℙ<sup>2</sup></th>
      <th scope="col">デカルト座標 on ℝ<sup>3</sup></th>
      <th scope="col">同次座標 on ℝℙ<sup>3</sup></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="2" rowspan="2">この transform は 3次元空間に用いられます。この方式で表現できません</td>
      <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>sx<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>sy</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>sz</mtd></mtr></mtable> </mfenced> </math></td>
      <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>sx<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>sy</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>sz</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math><br />
        &nbsp;</td>
    </tr>
  </tbody>
</table>
<h3 id="scaleX()" name="scaleX()"><code>scaleX()</code></h3>
<p><img align="left" alt="transform-functions-scaleX_2.png" class="internal lwrap" src="/@api/deki/files/5807/=transform-functions-scaleX_2.png?size=webview" style="width: 350px; height: 296px;" />CSS 関数 <code>scaleX()</code> は要素の各点の横座標を変更します。ただし拡大率が 1 のときは恒等変換になります。拡大縮小は等方性を持たず、要素の角度は保たれません。</p>
<p><code>scaleX(sx)</code> は <code>scale(sx, 1)</code> や <code>scale3d(sx, 1, 1)</code> の略記法です。</p>
<p><code>scaleX(-1)</code> は、原点を通る縦方向の軸を中心とした <a href="http://ja.wikipedia.org/wiki/%E7%B7%9A%E5%AF%BE%E7%A7%B0" title="http://en.wikipedia.org/wiki/Axial_symmetry">線対称</a> を定義します(原点は <code><a href="transform-origin" rel="custom">transform-origin</a></code> プロパティで定義されます)。</p>
<h4 id="Syntax" style="clear:left;">構文</h4>
<pre class="syntaxbox">
scaleX(<em>s</em>)
</pre>
<h4 id="Values" name="Values">値</h4>
<dl>
  <dt><em>s</em></dt>
  <dd>要素の各点の横座標に使う拡大縮小率を示す {{xref_cssnumber}}</dd>
</dl>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">デカルト座標 on ℝ<sup>2</sup></th>
      <th scope="col">同次座標 on ℝℙ<sup>2</sup></th>
      <th scope="col">デカルト座標 on ℝ<sup>3</sup></th>
      <th scope="col">同次座標 on ℝℙ<sup>3</sup></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>s</mtd><mtd>0</mtd></mtr> <mtr><mtd>0</mtd><mtd>1</mtd></mtr> </mtable> </mfenced> </math></td>
      <td><math> <mfenced><mtable><mtr>s<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
      <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>s<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
      <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>s<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
    </tr>
    <tr>
      <td><code>[s 0 0 1 0 0]</code></td>
    </tr>
  </tbody>
</table>
<h3 id="scaleY()" name="scaleY()"><code>scaleY()</code></h3>
<p><img align="left" alt="transform-functions-scaleY_2.png" class="internal lwrap" src="/@api/deki/files/5967/=transform-functions-scaleY_2.png" /></p>

<p>CSS 関数 <code>scaleY()</code> は要素の各点の縦座標を変更します。ただし拡大率が 1 のときは恒等変換になります。拡大縮小は等方性を持たず、要素の角度は保たれません。</p>
<p><code>scaleY(sy)</code> は <code>scale(1, sy)</code> や <code>scale3d(1, sy, 1)</code> の略記法です。</p>
<p><code>scaleY(-1)</code> は、原点を通る横方向の軸を中心とした <a href="http://ja.wikipedia.org/wiki/%E7%B7%9A%E5%AF%BE%E7%A7%B0" title="http://en.wikipedia.org/wiki/Axial_symmetry">線対称</a> を定義します(原点は <code><a href="transform-origin" rel="custom">transform-origin</a></code> プロパティで定義されます)。</p>
<h4 id="Syntax" style="clear:left;">構文</h4>
<pre class="syntaxbox">
scaleY(s)
</pre>
<h4 id="Values" name="Values">値</h4>
<dl>
  <dt><em>s</em></dt>
  <dd>要素の各点の縦座標に使う拡大縮小率を示す {{xref_cssnumber}}</dd>
</dl>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">デカルト座標 on ℝ<sup>2</sup></th>
      <th scope="col">同次座標 on ℝℙ<sup>2</sup></th>
      <th scope="col">デカルト座標 on ℝ<sup>3</sup></th>
      <th scope="col">同次座標 on ℝℙ<sup>3</sup></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="1" rowspan="2"><math>&nbsp;<mfenced><mtable><mtr>1<mtd>0</mtd></mtr> <mtr><mtd>0</mtd><mtd>s</mtd></mtr> </mtable> </mfenced> </math></td>
      <td><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>s</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
      <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>s</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
      <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>s</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
    </tr>
    <tr>
      <td><code>[1 0 0 s 0 0]</code></td>
    </tr>
  </tbody>
</table>
<h3 id="scaleZ()" name="scaleZ()"><code>scaleZ()</code></h3>
<p>CSS 関数 <code>scaleZ()</code> は要素の各点の Z座標を変更します。ただし拡大率が 1 のときは恒等変換になります。拡大縮小は等方性を持たず、要素の角度は保たれません。</p>
<p><code>scaleZ(sz)</code> は <code>scale3d(1, 1, sz)</code> の略記法です。</p>
<p><code>scaleZ(-1)</code> は、原点を通る Z軸を中心とした <a href="http://ja.wikipedia.org/wiki/%E7%B7%9A%E5%AF%BE%E7%A7%B0" title="http://en.wikipedia.org/wiki/Axial_symmetry">線対称</a> を定義します(原点は <code><a href="transform-origin" rel="custom">transform-origin</a></code> プロパティで定義されます)。</p>
<h4 id="Syntax" style="clear:left;">構文</h4>
<pre class="syntaxbox">
scaleZ(s)
</pre>
<h4 id="Values" name="Values">値</h4>
<dl>
  <dt><em>s</em></dt>
  <dd>要素の各点の Z成分に使う拡大縮小率を示す {{xref_cssnumber}}</dd>
</dl>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">デカルト座標 on ℝ<sup>2</sup></th>
      <th scope="col">同次座標 on ℝℙ<sup>2</sup></th>
      <th scope="col">デカルト座標 on ℝ<sup>3</sup></th>
      <th scope="col">同次座標 on ℝℙ<sup>3</sup></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="2" rowspan="2">この transform は 3次元空間に用いられます。この方式で表現できません</td>
      <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>s</mtd></mtr></mtable> </mfenced> </math></td>
      <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>s</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math><br />
        &nbsp;</td>
    </tr>
  </tbody>
</table>
<h3 id="skew()" style="clear:left;"><code>skew()</code></h3>
<p id="skew()">{{non-standard_header}}</p>
<p>CSS 関数 <code>skew()</code> はせん断マッピング(shear mapping または transvection)を行います。要素の各点を各方向に一定角度ひずませます。 これは各座標値に指定角度と原点からの距離に比例する値を足すことで行われます。原点から離れるほど大きな値が足されます。</p>
<div class="note style-wrap">
  <p><strong>註釈:</strong> <code>skew()</code> 関数は初期の草案にありました。その後取り除かれましたが、一部のプレフィックス付きの実装にまだ残っています。これは使わないようにしてください。<br />
    <br />
    同じ効果を得るためには、skew() に引数を1つだけ渡して使っていたなら <code>skewX()</code> を使うことができます。それ以外では <code>matrix(1, <em>tan(</em>ax<em>)</em></code><em>, </em><code><em>tan(</em>ay<em>)</em>, 1, 0, 0)が汎用的に使えます。ここで</code> <em>tan()</em> は CSS関数ではなく、自分で計算する必要があることに注意してください。</p>
</div>
<h4 id="Syntax" style="clear:left;">構文</h4>
<pre class="syntaxbox">
skew(<em>ax</em>)       <em>or</em>
skew(<em>ax</em>, <em>ay</em>)
</pre>
<h4 id="Values" name="Values">値</h4>
<dl>
  <dt><em>ax</em></dt>
  <dd>要素を横座標に沿ってひずませるのに使う {{xref_cssangle}}</dd>
  <dt><em>ay</em></dt>
  <dd>要素を縦座標に沿ってひずませるのに使う {{xref_cssangle}}</dd>
</dl>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">デカルト座標 on ℝ<sup>2</sup></th>
      <th scope="col">同次座標 on ℝℙ<sup>2</sup></th>
      <th scope="col">デカルト座標 on ℝ<sup>3</sup></th>
      <th scope="col">同次座標 on ℝℙ<sup>3</sup></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>tan(ax)</mtd></mtr><mtr>tan(ay)<mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
      <td><math> <mfenced><mtable><mtr>1<mtd>tan(ax)</mtd><mtd>0</mtd></mtr><mtr>tan(ay)<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr><mtr></mtr></mtable> </mfenced> </math></td>
      <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>tan(ax)</mtd><mtd>0</mtd></mtr><mtr>tan(ay)<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
      <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>tan(ax)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>tan(ay)<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
    </tr>
    <tr>
      <td><code>[1 tan(ay) tan(ax) 1 0 0]</code></td>
    </tr>
  </tbody>
</table>
<h3 id="skewX()" name="skewX()"><code>skewX()</code></h3>
<p>CSS 関数 <code>skewX()</code> は横方向のせん断マッピング行って、要素の各点を横方向に一定角度ひずませます。 これは横座標値に指定角度と原点からの距離に比例する値を足すことで行われます。原点から離れるほど大きな値が足されます。</p>
<h4 class="editable" id="Syntax" style="clear:left;"><span>構文</span></h4>
<pre class="syntaxbox">
skewX(a)
</pre>
<h4 id="Values" name="Values">値</h4>
<dl>
  <dt><em>a</em></dt>
  <dd>要素を横座標に沿ってひずませるのに使う {{xref_cssangle}}</dd>
</dl>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">デカルト座標 on ℝ<sup>2</sup></th>
      <th scope="col">同次座標 on ℝℙ<sup>2</sup></th>
      <th scope="col">デカルト座標 on ℝ<sup>3</sup></th>
      <th scope="col">同次座標 on ℝℙ<sup>3</sup></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>tan(ay)</mtd></mtr><mtr>0<mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
      <td><math> <mfenced><mtable><mtr>1<mtd>tan(ay)</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
      <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>tan(ay)</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
      <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>tan(ay)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
    </tr>
    <tr>
      <td><code>[1 0 tan(a) 1 0 0]</code></td>
    </tr>
  </tbody>
</table>
<h3 id="skewY()" name="skewY()"><code>skewY()</code></h3>
<p>CSS 関数 <code>skewY()</code> は縦方向のせん断マッピング行って、要素の各点を縦方向に一定角度ひずませます。 これは縦座標値に指定角度と原点からの距離に比例する値を足すことで行われます。原点から離れるほど大きな値が足されます。</p>
<h4 class="editable" id="Syntax" style="clear:left;"><span>構文</span></h4>
<pre class="syntaxbox">
skewY(a)
</pre>
<h4 id="Values" name="Values">値</h4>
<dl>
  <dt><em>a</em></dt>
  <dd>要素を縦座標に沿ってひずませるのに使う {{xref_cssangle}}</dd>
</dl>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">デカルト座標 on ℝ<sup>2</sup></th>
      <th scope="col">同次座標 on ℝℙ<sup>2</sup></th>
      <th scope="col">デカルト座標 on ℝ<sup>3</sup></th>
      <th scope="col">同次座標 on ℝℙ<sup>3</sup></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd></mtr><mtr>tan(ax)<mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
      <td><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>tan(ax)<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
      <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>tan(ax)<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
      <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>tan(ax)<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
    </tr>
    <tr>
      <td><code>[1 tan(a) 0 1 0 0]</code></td>
    </tr>
  </tbody>
</table>
<h3 id="translate()" name="translate()"><code>translate()</code></h3>
<p><img align="left" alt="transform-functions-translate_2.png" class="internal lwrap" src="/@api/deki/files/5970/=transform-functions-translate_2.png" style="" />CSS 関数 <code>translate()</code> は平面上の要素位置を動かします。この transform の特徴は、各方向への移動量を決めるベクトルの座標で決まります。</p>
<h4 id="Syntax" style="clear:left;">構文</h4>
<pre class="syntaxbox">
translate(tx)       <em>or</em>
translate(tx, ty)
</pre>
<h4 id="Values" name="Values">値</h4>
<dl>
  <dt><em>tx</em></dt>
  <dd>translateベクトルの横座標を示す {{xref_csslength}}</dd>
  <dt><em>ty</em></dt>
  <dd>translateベクトルの縦座標を示す {{xref_csslength}}。省略すると tx と同じ値になります。 <code>translate(2)</code> は <code>translate(2, 2)</code> と同じです。</dd>
</dl>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">デカルト座標 on ℝ<sup>2</sup></th>
      <th scope="col">同次座標 on ℝℙ<sup>2</sup></th>
      <th scope="col">デカルト座標 on ℝ<sup>3</sup></th>
      <th scope="col">同次座標 on ℝℙ<sup>3</sup></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="1" rowspan="2">
        <p>ℝ<sup>2</sup> の translate は線形 transform ではなく、デカルト座標系の行列で表現できません</p>
      </td>
      <td><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>tx</mtd></mtr><mtr>0<mtd>1</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
      <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>tx</mtd></mtr><mtr>0<mtd>1</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
      <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>tx</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
    </tr>
    <tr>
      <td><code>[1 0 0 1 tx ty]</code></td>
    </tr>
  </tbody>
</table>
<h3 id="translate3d()" name="translate3d()"><code>translate3d()</code></h3>
<p>CSS 関数 <code>translate3d()</code> は 3D空間内で要素位置を動かします。この transform の特徴は、各方向への移動量を決める 3次元ベクトルの座標で決まります。</p>
<h4 id="Syntax" style="clear:left;">構文</h4>
<pre class="syntaxbox">
translate3d(tx, ty, tz)
</pre>
<h4 id="Values" name="Values">値</h4>
<dl>
  <dt><em>tx</em></dt>
  <dd>translateベクトルの横座標を示す {{xref_csslength}}</dd>
  <dt><em>ty</em></dt>
  <dd>translateベクトルの縦座標を示す {{xref_csslength}}</dd>
  <dt><em>tz</em></dt>
  <dd>translateベクトルの Z成分を示す {{xref_csslength}}。{{xref_csspercentage}} 値は使えません。この場合この transform を含むプロパティが無効とみなされます。</dd>
</dl>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">デカルト座標 on ℝ<sup>2</sup></th>
      <th scope="col">同次座標 on ℝℙ<sup>2</sup></th>
      <th scope="col">デカルト座標 on ℝ<sup>3</sup></th>
      <th scope="col">同次座標 on ℝℙ<sup>3</sup></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="2" rowspan="2">
        <p>この transform は 3次元空間に用いられます。この方式で表現できません</p>
      </td>
      <td colspan="1" rowspan="2">ℝ<sup>3</sup> の translate は線形 transform ではなく、デカルト座標系の行列で表現できません</td>
      <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>tx</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>tz</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
    </tr>
  </tbody>
</table>
<h3 id="translateX()" name="translateX()"><code>translateX()</code></h3>
<p><img align="left" alt="transform-functions-translateX_2.png" class="internal lwrap" src="/@api/deki/files/5972/=transform-functions-translateX_2.png" style="" />CSS 関数 <code>translateX()</code> は平面上の要素を横方向に動かします。この transform の特徴は、横方向への移動量を決める {{xref_csslength}} で決まります。</p>
<p><code>translateX(tx)</code> は <code>translate(tx, 0)</code> の略記法です。</p>
<h4 id="Syntax" style="clear:left;">構文</h4>
<pre class="syntaxbox">
translateX(t)
</pre>
<h4 id="Values" name="Values">値</h4>
<dl>
  <dt><em>t</em></dt>
  <dd>translate ベクトルの横座標を示す {{xref_csslength}}</dd>
</dl>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">デカルト座標 on ℝ<sup>2</sup></th>
      <th scope="col">同次座標 on ℝℙ<sup>2</sup></th>
      <th scope="col">デカルト座標 on ℝ<sup>3</sup></th>
      <th scope="col">同次座標 on ℝℙ<sup>3</sup></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="1" rowspan="2">
        <p>ℝ<sup>2</sup> の translate は線形 transform ではなく、デカルト座標系の行列で表現できません</p>
      </td>
      <td><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>t</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
      <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>t</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
      <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>t</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
    </tr>
    <tr>
      <td><code>[1 0 0 1 t 0]</code></td>
    </tr>
  </tbody>
</table>
<h3 id="translateY()" name="translateY()"><code>translateY()</code></h3>
<p><img align="left" alt="transform-functions-translateY_2.png" class="internal lwrap" src="/@api/deki/files/5971/=transform-functions-translateY_2.png" style="" />CSS 関数 <code>translateY()</code> は平面上の要素を縦方向に動かします。この transform の特徴は、縦方向への移動量を決める {{xref_csslength}} で決まります。</p>
<p><code>translateY(ty)</code> は <code>translate(0, ty)</code> の略記法です。</p>
<h4 id="Syntax" style="clear:left;">構文</h4>
<pre class="syntaxbox">
translateY(t)
</pre>
<h4 id="Values" name="Values">値</h4>
<dl>
  <dt><em>t</em></dt>
  <dd>translate ベクトルの縦座標を表す {{xref_csslength}}</dd>
</dl>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">デカルト座標 on ℝ<sup>2</sup></th>
      <th scope="col">同次座標 on ℝℙ<sup>2</sup></th>
      <th scope="col">デカルト座標 on ℝ<sup>3</sup></th>
      <th scope="col">同次座標 on ℝℙ<sup>3</sup></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="1" rowspan="2">
        <p>ℝ<sup>2</sup> の translate は線形 transform ではなく、デカルト座標系の行列で表現できません</p>
      </td>
      <td><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
      <td colspan="1" rowspan="2"><math> <math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></math></td>
      <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
    </tr>
    <tr>
      <td><code>[1 0 0 1 0 t]</code></td>
    </tr>
  </tbody>
</table>
<h3 id="translateZ()" name="translateZ()"><code>translateZ()</code></h3>
<p>CSS 関数 <code>translateZ()</code> は要素を3次元空間の Z軸に沿って動かします。この transform の特徴は、移動量を決める {{xref_csslength}} で決まります。</p>
<p><code>translateZ(tz)</code> は <code>translate3d(0, 0, tz)</code> の略記法です。</p>
<h4 id="Syntax" style="clear:left;">構文</h4>
<pre class="syntaxbox">
translateZ(t)
</pre>
<h4 id="Values" name="Values">値</h4>
<dl>
  <dt><em>t</em></dt>
  <dd>translate ベクトルの Z成分を表す {{xref_csslength}}。{{xref_csspercentage}} 値は使えません。この場合この transform を含むプロパティが無効とみなされます。</dd>
</dl>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">デカルト座標 on ℝ<sup>2</sup></th>
      <th scope="col">同次座標 on ℝℙ<sup>2</sup></th>
      <th scope="col">デカルト座標 on ℝ<sup>3</sup></th>
      <th scope="col">同次座標 on ℝℙ<sup>3</sup></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="2" rowspan="2">この transform は 3次元空間に用いられます。この方式で表現できません</td>
      <td colspan="1" rowspan="2">
        <p>ℝ<sup>3</sup> の translate は線形 transform ではなく、デカルト座標系の行列で表現できません</p>
      </td>
      <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
    </tr>
  </tbody>
</table>
このリビジョンへ戻す