Want to share your CSS expertise with others? Apply to the MDN Fellowship by April 1! http://mzl.la/MDNFellowship

mozilla
Your Search Results

    transform-function

    草案
    このページは完成していません。

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

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

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

    デカルト座標

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

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

    ac bd

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

    .

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

    .

    この記法で、最もよく使われる以下の 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<length> 値を使えます。
    現時点で、Webkit (Safari, Chrome) と Opera は txty に単位のない <数量> をサポートしています。

    構文

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

    a b c d
    線形 transform を表す <数量>
    tx ty
    移動量を表す <length>
    デカルト座標 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 を表す <数量>
    a4 b4 c4
    移動量を表す <length>
    デカルト座標 on ℝ2 同次座標 on ℝℙ2 デカルト座標 on ℝ3 同次座標 on ℝℙ3
    この transform は 3次元空間に用いられます。この方式で表現できません translation は線形 transform でないので、デカルト座標の行列は 一般的な 3次元のアフィン変換を表せません a1a2a3a4b1b2b3b4c1c2c3c4d1d2d3d4

    rotate()

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

    構文

    rotate(a)
    

    a
    回転角度を表す <角度> 値。正なら時計回り、負なら反時計回りになります。
    デカルト座標 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] ベクトルで定義され、原点(transform-origin で定義されたもの)を通ります。ベクトルが正規化 されていなければ(3つの座標の自乗の合計が 1 でなければ)、内部で正規化されます。空ベクトル [0,0,0] のような正規化されていないベクトルを渡すと、CSS プロパティ全体の有効無効の判断をする前に、その回転が行われなくなります。

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

    構文

    rotate3d(x, y, z, a)
    

    x
    回転軸を示すベクトルの、X座標の <数量>
    y
    回転軸を示すベクトルの、Y座標の <数量>
    z
    回転軸を示すベクトルの、Z座標の <数量>
    a
    回転角度を示す<角度>。正の角度は時計回り、負の角度は反時計回りです。
    デカルト座標 on ℝ2 同次座標 on ℝℙ2 デカルト座標 on ℝ3 同次座標 on ℝℙ3
    この transform は 3次元空間に用いられます。この方式で表現できません 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

    rotateX()

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

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

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

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

    構文

    rotateX(a)
    

    a
    回転角度を示す <角度>。正なら時計回り、負なら反時計回り
    デカルト座標 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() は、要素を変形させずに、縦座標を中心に回転します。移動量は角度で定義します。正なら時計回り、負なら反時計回りです。

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

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

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

    構文

    rotateY(a)
    

    a
    回転角度を示す <角度>。正なら時計回り、負なら反時計回り
    デカルト座標 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軸を中心に回転します。移動量は角度で定義します。正なら時計回り、負なら反時計回りです。

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

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

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

    構文

    rotateZ(a)
    

    a
    回転角度を示す <角度>。正なら時計回り、負なら反時計回り
    デカルト座標 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()

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

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

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

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

    構文

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

    sx
    拡大縮小ベクトルの横座標を表す <数量>
    sy
    拡大縮小ベクトルの縦座標を表す <数量>。値を与えない場合のデフォルトは 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
    拡大縮小ベクトルの横座標を表す <数量>
    sy
    拡大縮小ベクトルの縦座標を表す <数量>
    sz
    拡大縮小ベクトルの Z成分を表す <数量>
    デカルト座標 on ℝ2 同次座標 on ℝℙ2 デカルト座標 on ℝ3 同次座標 on ℝℙ3
    この transform は 3次元空間に用いられます。この方式で表現できません sx000sy000sz sx0000sy0000sz00001

    scaleX()

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

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

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

    構文

    scaleX(s)
    

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

    scaleY()

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

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

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

    構文

    scaleY(s)
    

    s
    要素の各点の縦座標に使う拡大縮小率を示す <数量>
    デカルト座標 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成分に使う拡大縮小率を示す <数量>
    デカルト座標 on ℝ2 同次座標 on ℝℙ2 デカルト座標 on ℝ3 同次座標 on ℝℙ3
    この transform は 3次元空間に用いられます。この方式で表現できません 10001000s 1000010000s00001

    skew()

    非標準

    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
    要素を横座標に沿ってひずませるのに使う <角度>
    ay
    要素を縦座標に沿ってひずませるのに使う <角度>
    デカルト座標 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
    要素を横座標に沿ってひずませるのに使う <角度>
    デカルト座標 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
    要素を縦座標に沿ってひずませるのに使う <角度>
    デカルト座標 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()

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

    構文

    translate(tx)       or
    translate(tx, ty)
    

    tx
    translateベクトルの横座標を示す <length>
    ty
    translateベクトルの縦座標を示す <length>。省略すると 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ベクトルの横座標を示す <length>
    ty
    translateベクトルの縦座標を示す <length>
    tz
    translateベクトルの Z成分を示す <length><割合> 値は使えません。この場合この transform を含むプロパティが無効とみなされます。
    デカルト座標 on ℝ2 同次座標 on ℝℙ2 デカルト座標 on ℝ3 同次座標 on ℝℙ3

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

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

    translateX()

    CSS 関数 translateX() は平面上の要素を横方向に動かします。この transform の特徴は、横方向への移動量を決める <length> で決まります。

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

    構文

    translateX(t)
    

    t
    translate ベクトルの横座標を示す <length>
    デカルト座標 on ℝ2 同次座標 on ℝℙ2 デカルト座標 on ℝ3 同次座標 on ℝℙ3

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

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

    translateY()

    CSS 関数 translateY() は平面上の要素を縦方向に動かします。この transform の特徴は、縦方向への移動量を決める <length> で決まります。

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

    構文

    translateY(t)
    

    t
    translate ベクトルの縦座標を表す <length>
    デカルト座標 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 の特徴は、移動量を決める <length> で決まります。

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

    構文

    translateZ(t)
    

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

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

    10000100001t0001

    ドキュメントのタグと貢献者

    Contributors to this page: sosleepy, ethertank
    最終更新者: ethertank,
    サイドバーを隠す