“CSS Transforms Module”

概要

“CSS Transforms Module”はCSSによる要素の二次元平面と三次元空間での変形について定義している仕様書です。

要素に適用される変形を指定する“transform”プロパティや変形関数について定義されています。

仕様書

定義されているプロパティ

transform
transform-origin
transform-box
translate
scale
rotate
transform-style
perspective
perspective-origin
backface-visibility

定義されている関数

matrix()
translate()
translateX()
translateY()
scale()
scaleX()
scaleY()
rotate()
skew()
skewX()
skewY()
matrix3d()
translate3d()
translateZ()
rotate3d()
rotateX()
rotateY()
rotateZ()
perspective()

変形マトリクス

“変形マトリクス(Transformation Matrix)”は一つの座標系から別の座標系への数学的な変換を定義する行列(Matrix)で、要素がどのように変形されるのかを数学的に表現します。

変形マトリクスによる座標の変換の仕組み

要素の変形は“アフィン変換(Affine transformation)”によって行われ、座標の変換は同次座標を表すベクトルに行列を乗算することによって行われます。

変形される要素に適用される変形マトリクスは次の手順で算出されます。

1. 単位行列の変形マトリクスから始める。
2. “transform-origin”プロパティの値によって平行移動する。
3. “transform”プロパティの値である変形関数で表される変形マトリクスを左から順に乗算する。
4. “transform-origin”プロパティの値の正負を逆にして平行移動する。

変形される要素の祖先要素も変形されている場合にはすべての祖先要素の変形マトリクスが変形マトリクスに乗算されます。

変形関数の適用

“transform”プロパティの値が“none”でない場合、その要素は要素の描画にあたって座標や距離を算出するために使用するローカル座標系を生成します。

要素は親要素の座標系にも参加します。ローカル座標系における座標は変形マトリクスを乗算して親要素の座標系における座標に変換されます。

何も変形されていない初期座標系では、座標系はxy-平面が文書の描画される領域(ディスプレイやプリントアウトされる場合は紙など)に平行で、X軸は左から右へ、Y軸は上から下へ、Z軸は奥から手前へ増加する直交座標系です。

座標系は、すべての祖先要素が生成する座標系にも参加し、すべての祖先要素に適用された変形が累積して適用されます。祖先要素が変形されている要素に適用される変形は祖先要素に適用される変形と要素自身に適用される変形の変形マトリクスをすべて乗算して表されます。

CSSのボックス・モデルによって描画される要素の場合、要素の変形は変形される要素以外のレイアウトには影響を与えません。ただし、変形はスクロール可能オーバーフロー・エリアを拡張するので、“overflow”プロパティの値が“scroll”もしくは“none”である場合には変形によってスクロールバーが表示される場合があります。

CSSのボックス・モデルによって描画される要素であり、“transform”プロパティの値が“none”でない場合、新たな重ね合わせコンテキストが生成されます。要素は親要素の中に“z-index: 0;”である場合と同じ順序で重ねられて描画されます。また、“z-index: auto;”は“z-index: 0;”として扱われます。

CSSのボックス・モデルによって描画される要素であり、“transform”プロパティの値が“none”でない場合、新たな包含ブロックが生成され、要素のパディング・ボックスは配置位置が指定される子孫要素(“position: absolute;”や“position: fixed;”)の配置位置の基準となります。

ルート要素に固定された背景はルート要素の変形の影響を受けます。ルート要素以外の要素では、その要素自信か祖先要素が変形されると“background-attachment”プロパティの値が“fixed”である場合、“scroll”として扱われます。ただし、計算値は変わりません。

恒等変形関数

“恒等変形関数(Identity Transform Function)”は変形マトリクスが単位行列となる関数です。恒等変形関数による変形の出力結果は入力と同じとなり、変形されません。

二次元変形関数の恒等変形関数

以下の二次元変形関数は恒等変形関数です。

• “matrix(1,0,0,1,0,0)”
• “translate(0)”
• “translateX(0)”
• “translateY(0)”
• “scale(1)”
• “scaleX(1)”
• “scaleY(1)”
• “rotate(0)”
• “skew(0,0)”
• “skewX(0)”
• “skewY(0)”

三次元変形関数の恒等変形関数

以下の三次元変形関数は恒等変形関数です。

• “matrix(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)”
• “translate3d(0,0,0)”
• “translateZ(0)”
• “scaleZ(1)”
• “rotate3d(1,1,1,0)”
• “rotateX(0)”
• “rotateY(0)”
• “rotateZ(0)”

“perspective()”関数の場合は変形マトリクスの“m34”成分が限りなく“0”に近くなる“perspective(infinity)”を恒等変形関数として扱います。

三次元変形の遠近感

三次元の変形ではZ座標がユーザーに近い要素を大きく、Z座標がユーザーから遠い要素を小さく描画することによって遠近感を表現することができます。

要素は“perspective”プロパティもしくは“perspective()”関数で指定された視点から要素が描画される面を見たように遠近感を表現して描画されます。

視点は既定では要素が描画される三次元描画コンテキストの中央ですが、“perspective-origin”プロパティによって移動することができます。

“視点マトリクス(Perspective Matrix)”は三次元描画コンテキストの中に要素を描画する際に遠近感を表現するために乗算される変形マトリクスです。“perspective”プロパティと“perspective-origin”プロパティの値を使用して次の手順で算出されます。

1. 単位行列の変形マトリクスから始める。
2. “perspective-origin”プロパティの値によって平行移動する。
3. “perspective()”関数の変形マトリクスに“perspective”プロパティによって指定された距離を当てはめて乗算する。
4. “perspective-origin”プロパティの値の正負を逆にして平行移動する。

三次元描画コンテキスト

“三次元描画コンテキスト(3D Rendering Contexts)”は共通の祖先を持つ要素の集まりで、参加している要素は共通の三次元座標系を共有します。三次元描画コンテキストでは要素の重なり方は共通の座標系におけるZ座標によって決定され、場合によっては要素同士が交わって描画されます。

三次元描画コンテキストは“transform-style”プロパティの値が“preserve-3d”であり、他の三次元描画コンテキストの一部でない要素によって生成されます。三次元描画コンテキストを生成する要素は自身が生成する三次元描画コンテキストに参加します。

“transform-style”プロパティの使用値が“preserve-3d”であり、他の三次元描画コンテキストの一部である要素は新たな三次元描画コンテキストは生成せず、参加している三次元描画コンテキストを拡張します。また、親要素が三次元描画コンテキストを生成するか拡張する場合、要素はその三次元描画コンテキストに参加します。

三次元描画コンテキストに参加する要素の変形は最終的に以下の手順で算出される“累積三次元変形マトリクス(Accumulated 3D Transformation Matrix)”によって表現されます。

1. 単位行列の変形マトリクスから始める。
2. “transform”プロパティの値が“none”でなければ算出される変形マトリクスを乗算する。
3. 親要素に対する位置から変形マトリクスを算出し、算出された変形マトリクスを乗算する。
4. 親要素の“perspective”プロパティの値が“none”でなければ視点マトリクスを乗算する。

三次元描画コンテキストに参加する要素は次の手順で描画されます。

1. 三次元描画コンテキストを生成する要素の背景やボーダーなどのボックス装飾が描画されます。
2. 三次元変形が適用されないコンテンツと子孫要素が三次元描画コンテキストを生成する要素の“Z=0”の面に描画されます。
3. 三次元変形が適用される要素がそれぞれの平面に累積三次元変形マトリクスによって変形されて描画されます。
4. ニューウェルのアルゴリズムを使用して要素の交差が反映されます。
5. それぞれの平面へ描画された結果を三次元描画コンテキストを生成する要素の背景やボックス装飾の上に描画されます。同一平面の要素は既定の描画順で重ねて描画されます。

既定では三次元変形された要素は表と裏の両面に同じコンテンツを表示し、三次元変形によって要素が裏返されると表面の鏡像のように描画されます。しかし、これは2つの要素を背中合わせにしたい場合などに不都合になることがあり、“backface-visibility”プロパティによって変更することができます。“backface-visibility”プロパティの値を“hidden”に指定すると裏面を透明にすることができます。

なお、三次元描画コンテキストに参加しない要素にも三次元変形を適用することはできますが、その場合は変形は適用されるものの、他の要素と交わったり、変形によって要素が重なり合う順序が変わったりすることはありません。

根源的変形関数と派生的変形関数

いくつかの変形関数はより汎用的な関数によって表すことができます。これらの変形関数は“派生的変形関数(Derived Transform Functions)”と呼ばれ、その変形関数を表すことができる汎用的な関数は“根源的変形関数(Primitive Transform Functions)”と呼ばれます。

二次元変形関数の派生的変形関数と根源的変形関数は以下の通りです。

“translate()”関数の派生的変形関数

“translateX()”関数、“translateY()”関数

“scale()”関数の派生的変形関数

“scaleX()”関数、“scaleY()”関数

三次元変形関数の派生的変形関数と根源的変形関数は以下の通りです。

“translate3d()”関数の派生的変形関数

“translateX()”関数、“translateY()”関数、“translateZ()”関数、“translate()”関数

“scale3d()”関数の派生的変形関数

“scaleX()”関数、“scaleY()”関数、“scaleZ()”関数、“scale()”関数

“rotate3d()”関数の派生的変形関数

“rotateX()”関数、“rotateY()”関数、“rotateZ()”関数、“rotate()”関数

変形の補間

特殊な変形関数の補間

“matrix()”関数、“matrix3d()”関数、“perspective()”関数の場合はまず4×4の変形マトリクスに変換され、変形を平行移動、拡大・縮小、シアー変換、視点移動に分解してから数値的に補間され、その結果で再び変形マトリクスを構築することで補間結果を算出します。

“rotate3d()”関数の場合は初めに最初の3個の引数によって表される回転軸のベクトルを正規化し、正規化されたベクトルが等しくなく、どちらもゼロベクトルでない場合に4×4の変形マトリクスに変換され、“matrix3d()”関数などと同様に補完されます。そうでなければ回転角度が数値的に補間されます。どちらの回転角度も0度の場合は補間結果の回転軸のベクトルは“(0,0,1)”となります。

その他の変形関数の補間

同じ名前で同じ数に引数を含む関数は事前の変換なしで数値的に補間されます。補間の結果は同じ数の引数を含む同じ変形関数になります。

同じ根源的変形関数を持つ派生的変形関数や引数の数が異なる同じ名前の関数は根源的変形関数に変換されてから数値的に補間されます。補間の結果は補間された引数を持つ根源的変形関数になります。どちらの関数も二次元の変形を表す関数の場合は補間結果は二次元の根源的変形関数、少なくとも片方の関数が三次元の変形を表す場合は補間結果は三次元の根源的変形関数です。

変形関数リストの補間

変形が複数の関数のリストで表される場合、次のように補間されます。

どちらも“none”である場合。

補間結果は“none”です。

“none”を長さアイテム数が0個のリストとして扱い、変形リストの長さが異なる場合。

短い方のリストに長い方のリストのアイテムと同じ位置に対応する恒等変形関数を追加します。

次に、リストの先頭から同じ順番の関数を比較します。

同じ名前の関数、もしくは同じ根源的変形関数を持つ派生的変形関数である場合。

引数を数値的に補間し、派生的変形関数は共通の根源的変形関数として補間します。

異なる関数であり、同じ根源的変形関数も持たない場合

残ったすべての関数を4×4の変形マトリクスに変換し、それらを乗算した変形マトリクスを分解して補間します。

その他の用語

“変形可能要素(Transformable Element)”

“transform”プロパティで変形が可能な以下の要素。

• インライン・レベルの非置換ボックス、テーブル行ボックス、テーブル行グループ・ボックスを除くCSSのボックス・モデルによって描画される要素
• SVGのすべてのペイント・サーバー要素、“<clipPath>”要素、描画可能要素

“変形済要素(Transformed Element)”

“transform”プロパティの値が“none”でない要素。

“三次元変形済要素(3D Transformed Element)”

“transform”プロパティの値に三次元変形関数が含まれる要素。

“ローカル座標系(Local Coordinate System)”

要素を描画する際に座標や距離を算出するために使用されるその要素のための座標系。参照ボックスの左上が座標系の原点になり、単位はCSSピクセルです。

“参照ボックス(Reference Box)”

変形の際に基準となる矩形の領域で、“transform-box”プロパティによって定義されます。“<percentage>”値は参照ボックスの大きさを“100%”として計算されます。

プロパティ

関数