CSS変形モジュール レベル2

1. はじめに

本仕様は、[css-transforms-1]を拡張するデルタ仕様であり、著者が要素を三次元空間で変形できるようにします。 transformプロパティ用の新しい変形関数は三次元変形を可能にし、 追加のプロパティによって三次元変形の扱いが容易になり、入れ子の三次元変形要素同士の相互作用を著者が制御できるようになります。

1. perspectiveプロパティは、子要素に追加のパースペクティブ変換を与えることができます。perspective-originプロパティは、パースペクティブが適用される原点を制御し、「消失点」の位置を効果的に変更します。

2. transform-styleプロパティは、3D変形された要素とその3D変形された子孫が共通の三次元空間を共有できるようにし、三次元オブジェクトの階層構造を構築できます。

3. backface-visibilityプロパティは、要素が三次元変形によって裏返され、裏面が表示される場合に関係します。この状況で要素を非表示にしたい場合は、このプロパティにhidden値を設定することで実現できます。

注: transformプロパティの一部の値は要素を三次元座標系で変形できますが、要素自体は三次元オブジェクトではありません。要素は二次元平面（フラットな面）上に存在し、奥行きはありません。

本仕様はさらに、scale、translate、rotateという3つの便利なプロパティも追加し、単純な変形の記述やアニメーションが容易になります。

1.1. モジュール間の相互作用

ここで定義される3D変形関数は、transformプロパティの関数セットを拡張します。

perspective、transform-style、backface-visibilityの一部の値は、すべての子孫の包含ブロックや積み重ねコンテキストの生成につながります。

三次元変形は要素の視覚的な重なり順に影響し、Appendix E（[CSS21]）で記述されている前後の描画順序を上書きします。

1.2. 値の定義

本仕様はCSSプロパティ定義規約（[CSS21]）に従い、値定義構文（[CSS-VALUES-3]）を使用します。 本仕様で定義されていない値型はCSS Values & Units [CSS-VALUES-3]で定義されます。他のCSSモジュールと組み合わせることでこれらの値型定義が拡張される場合があります。

各プロパティ定義に記載されたプロパティ固有の値に加え、 この仕様で定義されるすべてのプロパティはCSS全域キーワードもプロパティ値として受け付けます。 読みやすさのため、明示的な繰り返し記載はしていません。

2. 用語

3D変形要素

transformプロパティの算出値に3D変形関数のいずれかが含まれる要素

3D行列

4x4行列で、2D行列の要件を満たさないもの。

恒等変形関数

CSS Transformsの恒等変形関数に加え、恒等変形関数の例としては translate3d(0, 0, 0)、translateZ(0)、scaleZ(1)、rotate3d(1, 1, 1, 0)、rotateX(0)、rotateY(0)、rotateZ(0)、matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)などがあります。 特殊なケースとしてperspective: perspective(none)が挙げられます。 この場合、m₃₄の値が極めて小さくなり、変形関数は恒等行列とみなされます。

パースペクティブ行列

perspectiveおよびperspective-originプロパティの値から算出される行列（詳細は下記参照）。

累積3D変換行列

3Dレンダリングコンテキストのルートに対する要素ごとの行列（詳細は下記参照）。

3Dレンダリングコンテキスト

共通の三次元座標系を共有する共通の祖先を持つ要素群（詳細は下記参照）。

2.1. 算出値の<transform-list>のシリアライズ

<transform-list>（算出値）は、下記アルゴリズムにより<matrix()>または<matrix3d()>関数のいずれかとしてシリアライズされます：

1. transformを恒等行列で初期化した4x4行列とする。transformの要素m11、m22、m33、m44は1に、その他は0に設定する。

2. <transform-function>を<transform-list>内で全て後置乗算でtransformに適用する。

3. <matrix()>または<matrix3d()>のどちらでシリアライズするか選択：

   transformが2D行列の場合

   transformを<matrix()>関数としてシリアライズする。

   それ以外の場合

   transformを<matrix3d()>関数としてシリアライズする。

この文言はCSS Transforms 1の本文に追加するよう修正が必要です。

3. 二次元サブセット

UAは常に三次元変形をレンダリングできるとは限らず、そうした場合は本仕様の二次元サブセットのみをサポートします。この場合、三次元変形やtransform-style、perspective、perspective-origin、backface-visibilityはサポートされません。Section 3D変形レンダリングは適用されません。行列分解は「Graphics Gems II, edited by Jim Arvo」の"unmatrix"メソッドから技術を使い、2D用に簡略化しています。Section 変形関数の数学的記述は引き続き有効ですが、a=m₁₁、b=m₁₂、c=m₂₁、d=m₂₂、e=m₄₁、f=m₄₂（2Dの3x2行列、6パラメーター）を使った3x3変換行列に簡略化できます。

div {  transform: scale(2) rotate(45deg);
  transform: scale(2) rotate3d(0, 0, 1, 45deg);
}

4. 変形レンダリングモデル

この仕様は CSS Transforms 1 § 3 変形レンダリングモデル を拡張し、三次元変形関数の存在、transform-origin のZ値、perspectiveプロパティ、そして transform-style プロパティの使用値が preserve-3d の場合に適用される新しい3Dレンダリングモデルに対応しています。

三次元変形関数は概念的に座標空間を三次元に拡張し、スクリーンの平面に垂直なZ軸を追加します。Z軸は画面奥から手前（ユーザー側）に向かって増加します。

座標空間の初期状態のデモ。

3D変形では transform-origin のZ成分が結果に影響するため、変換行列は transform と transform-origin プロパティから以下の手順で計算されます:

1. 恒等行列で開始する。

2. transform-origin の算出X,Y,Zで平行移動する

3. transform プロパティの変形関数それぞれを左から右へ乗算する

4. transform-origin の算出X,Y,Zの負値で平行移動する

4.1. 3D変形レンダリング

通常、要素は平面としてレンダリングされ、積み重ねコンテキストと同じ平面に描画されます。しばしばこれはページ全体が共有する平面です。二次元変形関数は要素の見た目を変えることができますが、その要素は依然として積み重ねコンテキストと同じ平面に描画されます。

三次元変形を持つ要素が 3Dレンダリングコンテキスト に含まれていない場合、適切な変形が適用された状態で描画されますが、他の要素と交差しません。この場合の三次元変形は二次元変形と同様に単なるペインティング効果とみなせます。同様に、変形は描画順序に影響しません。例えば、Z方向に正の値で平行移動した変形は要素を大きく見せますが、その要素がZ変換なしの要素の前面に描画されることはありません。

入れ子の3D変形要素のレンダリング方法（数式含む？）を記述すること

この例は前の説明とつながらない

この例は三次元変形が要素に適用された場合の効果を示します。

<style>
div {
    height: 150px;
    width: 150px;
}
.container {
    border: 1px solid black;
}
.transformed {
    transform: rotateY(50deg);
}
</style>

<div class="container">
    <div class="transformed"></div>
</div>

変形は垂直（Y軸）周りに50度回転です。青いボックスが細く見える点に注目してください。ただし三次元的には見えません。

4.1.1. パースペクティブ

パースペクティブを使うことで、Z軸上で高い（ユーザーに近い）要素ほど大きく、遠いものほど小さく描画され、奥行き感を演出できます。拡大率は d/(d − Z) で、dは perspective プロパティ値、すなわち描画面から視点の距離です。

パースペクティブの効果は3D変形要素に2通りで適用できます。1つ目は、要素の 'transform function list' に perspective() 関数を含めることで、要素の 'current transformation matrix' に計算されます。

2つ目は、perspective と perspective-origin プロパティを要素に適用して、その3D変形された子要素の描画に影響を与え、同じ三次元シーンに存在するような印象を与えるパースペクティブを共有させます。

perspectiveプロパティとZ位置によるスケーリングの違いを示す図。上の図ではZがdの半分。元の円（実線）がZ（破線円）位置に表示されるようにするため、円が2倍に拡大されて水色円になる。下の図では円が1/3に縮小されて元の位置より奥に表示される。

通常、視点の位置は描画の中心にあります。この位置は、例えば複数の描画が同じパースペクティブを共有すべき場合など、perspective-originを設定することで変更できます。

perspective-originを上方に動かした効果の図。

パースペクティブ行列は次のように計算されます:

1. 恒等行列で開始。

2. perspective-originの算出X,Yで平行移動。

3. perspective()変形関数から得られる行列を、perspectiveプロパティの値を長さとして乗算する。

4. perspective-originの算出X,Yの負値で平行移動。

この例は、パースペクティブを使うことで三次元変形がより現実的に見えることを示します。

<style>
div {
  height: 150px;
  width: 150px;
}
.container {
  perspective: 500px;
  border: 1px solid black;
}
.transformed {
  transform: rotateY(50deg);
}
</style>

<div class="container">
  <div class="transformed"></div>
</div>

内側の要素は前の例と同じ変形ですが、今回は親要素のperspectiveプロパティによってレンダリングが影響されます。perspectiveはZ座標が正（ユーザーに近い）頂点のX,Yを拡大し、奥（負のZ座標）は縮小することで奥行き感を生みます。

4.1.2. 3Dレンダリングコンテキスト

この節では、3D 変形および transform-style プロパティを使用する内容のレンダリングモデルを規定する。このモデルを説明するため、 「3D レンダリングコンテキスト」という概念を導入する。

3D レンダリング コンテキストとは、共通の祖先を根とし、3D 変形のレンダリングにおいて 共通の三次元座標系を共有するとみなされる要素の集合である。3D レンダリングコンテキスト内の要素を前面から背面へ レンダリングする順序は、その三次元空間内の z 位置に依存し、さらに、 それらの要素の 3D 変形によって要素同士が交差する場合は、交差した状態でレンダリングされる。

その三次元空間内における各要素の位置は、指定された要素から 3D レンダリングコンテキストを確立する要素まで、変換行列を累積することによって決定される。

要素は次のように 3D レンダリングコンテキストを確立し、それに参加する。

• 3D レンダリングコンテキストは、transform-style の使用値が preserve-3d であり、それ自体は 3D レンダリングコンテキストの一部ではない変形可能な要素によって確立される。3D レンダリングコンテキストを確立する要素は、そのコンテキストにも参加する。

• transform-style の使用値が preserve-3d であり、それ自体が3D レンダリングコンテキストに参加する要素は、 新しい 3D レンダリングコンテキストを確立するのではなく、そのコンテキストを拡張する。

• 要素の親が3D レンダリングコンテキストを確立または拡張する場合、その要素は3D レンダリングコンテキストに参加する。

一部の CSS プロパティには、「グループ化」を強制するとみなされる値がある。これらの値では、要素と その子孫を、他の要素と合成する前にグループとしてレンダリングする必要がある。これには、不透明度、 フィルター、およびクリッピングに影響するプロパティが含まれる。該当するプロパティ値は、グループ化プロパティ値に一覧されている。したがって、transform-style:preserve-3d の要素に使用されると、使用値が flat に変更され、その要素が 3D レンダリングコンテキストを生成または拡張することを妨げる。

3D レンダリングコンテキストでは、要素のレンダリングおよび並べ替えを次のように行う。

1. 3D レンダリングコンテキストを確立する要素と、 その 3D レンダリングコンテキストに参加するその他の各 3D 変形要素は、 それぞれ独自の平面にレンダリングされる。 この平面には、 要素の背景、ボーダー、その他のボックス装飾、内容、 および子孫要素が含まれるが、 独自の平面を持つ子孫要素（およびその子孫）は除外される。 このレンダリングは、CSS 2.1、 付録 E、E.2 節「描画順序」に従って行われる。

2. この平面の集合に対して、 ニューウェルのアルゴリズムに従い、 累積 3D 変換行列によって平面を変形したうえで交差処理を行う。 同一平面上にある3D 変形要素は、描画順序に従ってレンダリングされる。

2D変形要素を独自の平面にしなくても問題ないか？

注: この仕様では以前、確立要素の背景・枠線などの装飾が3Dシーン全体の背後に描画されると定義していましたが、#6238で変更されました。今後3Dレンダリングコンテキストの定義が変更された場合は元に戻す検討もありえます。

なお、変形で負のz成分を持つ要素は、確立要素のコンテンツや未変形の子孫の背後に描画され、3D変形要素は未変形要素や内容と相互に貫通する場合があります。

注: 3Dレンダリングコンテキスト内の3D変形要素はすべて奥行き順でソート・交差するため、兄弟のように描画されます。transform-style: preserve-3dの効果は、3Dレンダリングコンテキスト内の3D変形要素を確立要素まで持ち上げて描画するが、累積3D変換行列で変形したまま描画される、というイメージです。

<style>
div {
  height: 150px;
  width: 150px;
}
.scene {
  background-color: rgba(0, 0, 0, 0.3);
  border: 1px solid black;
  perspective: 500px;
}
.container {
  transform-style: preserve-3d;
}
.container > div {
  position: absolute;
  left: 0;
}
.container > :first-child {
  transform: rotateY(45deg);
  background-color: orange;
  top: 10px;
  height: 135px;
}
.container > :last-child {
  transform: translateZ(40px);
  background-color: rgba(0, 0, 255, 0.6);
  top: 50px;
  height: 100px;
}
</style>

<div class="scene">
  <div class="container">
    Lorem ipsum dolor sit amet, consectetaur adipisicing elit…
    <div></div>
    <div></div>
  </div>
</div>

この例は、3Dレンダリングコンテキスト内で要素同士が交差できることを示しています。container要素は自身とその2つの子要素のために3Dレンダリングコンテキストを確立し、scene要素はそのコンテキストにパースペクティブを追加します。子要素同士が交差し、オレンジ色の要素はcontainerとも交差します。

<style>
div {
  height: 150px;
  width: 150px;
}
.container {
  perspective: 500px;
  border: 1px solid black;
}
.transformed {
  transform: rotateY(50deg);
  background-color: blue;
}
.child {
  transform-origin: top left;
  transform: rotateX(40deg);
  background-color: lime;
}
</style>

<div class="container">
  <div class="transformed">
    <div class="child"></div>
  </div>
</div>

この例は入れ子の3D変形のレンダリングを示します。青いdivは前の例と同じ変形で、親要素のperspectiveで描画が影響されます。ライム色要素もX軸回転（transform-originで上端固定）で3D変形されていますが、ライム要素は親の平面に描画されており、同じ3Dレンダリングコンテキストには属していません。そのためライム要素は短くなるだけで、青い要素から「飛び出して」見えることはありません。

4.1.3. 変形要素の階層構造

デフォルトでは、変形要素は 3Dレンダリングコンテキスト を作らず、内容を平坦化して描画します。しかし、共通の三次元空間を共有する変形オブジェクトの階層構造を作るのは有用なため、transform-style プロパティに preserve-3d を指定すればこの平坦化挙動を上書きできます。これにより、変形要素の子孫も同じ3Dレンダリングコンテキストを共有できます。そうした要素の非3D変形子孫は前述Cのステップで要素の平面に描画されますが、同じ3Dレンダリングコンテキストの3D変形要素は独自の平面に「飛び出して」描画されます。

<style>
div {
  height: 150px;
  width: 150px;
}
.container {
  perspective: 500px;
  border: 1px solid black;
}
.transformed {
  transform-style: preserve-3d;
  transform: rotateY(50deg);
  background-color: blue;
}
.child {
  transform-origin: top left;
  transform: rotateX(40deg);
  background-color: lime;
}
</style>

この例は前の例と同じですが、青い要素に transform-style: preserve-3d が追加されています。青い要素はcontainerの3Dレンダリングコンテキストを拡張します。これで青・ライム両方の要素が共通の三次元空間を共有し、ライム要素が親から傾いて飛び出すように描画され、containerのperspectiveの影響も受けます。

4.1.4. 累積3D変換行列の計算

要素を3Dレンダリングコンテキストでレンダリングする際に使用される最終的なtransform値は、以下の手順で累積3D変換行列を計算することで得られます：

1. transformを恒等行列とする。

2. current elementを変形された要素とする。

3. parent elementを変形された要素の親要素とする。

4. current elementが変形された要素の3Dレンダリングコンテキスト内の要素である間、以下を繰り返す：

   1. current elementのtransform値がnoneでない場合、current elementの変換行列をtransformに前乗算する。

   2. current elementがparent elementからのオフセット（スクロールオフセット含む）を表す平行移動行列を計算し、それをtransformに前乗算する。

   3. parent elementのperspective値がnoneでない場合、parent elementのパースペクティブ行列をtransformに前乗算する。

   4. current elementをparent elementとする。

   5. parent elementをcurrent elementの親要素とする。

注: ここで述べるように、累積3D変換行列は、変形された要素やその祖先チェーンにおいて視覚フォーマットモデルによって発生するオフセット（スクロールオフセット含む）を考慮します。これは、その要素が属する3Dレンダリングコンテキストを確立する要素まで含めて処理されます。

4.1.5. 裏面の可視性

三次元変形を使用すると、要素の裏面が 見えるように変形できる。3D 変形された要素は両面に同じ内容を表示するため、裏面は 表面の鏡像のように見える（要素がガラス板に投影されているかのように）。通常、裏面が 観察者の方を向いている要素も表示されたままとなる。しかし、backface-visibility プロパティを使用すると、 裏面が観察者の方を向いているときに要素を不可視にできる。この挙動は「動的」である。 backface-visibility: hidden の要素が、 表面と裏面が交互に見えるようにアニメーションしている場合、その要素は、 表面が観察者の方を向いているときにのみ表示される。

要素の裏面が見えるかどうかは、累積 3D 変換行列を使用して判断されるため、 3D レンダリングコンテキストを確立する要素の親を基準とする。

注記: このプロパティは、トランプを作成する場合のように、 2 つの要素を背中合わせに配置するときに役立つ。このプロパティがない場合、カードを裏返すアニメーションの途中で、 表面と裏面の要素の位置が入れ替わることがある。別の例として、6 個の要素から箱を作成し、 その箱の内側の面だけを表示したい場合が挙げられる。

<style>
.body { perspective: 500px; }
#card {
  position: relative;
  height: 300px; width: 200px;
  transition: transform 1s;
  transform-style: preserve-3d;
}
#card.flipped {
  transform: rotateY(180deg);
}
.face {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: silver;
  border-radius: 40px;
  backface-visibility: hidden;
}
.back {
  transform: rotateY(180deg);
}
</style>
<div id="card" onclick="this.classList.toggle('flipped')">
  <div class="front face">Front</div>
  <div class="back face">Back</div>
</div>

backface-visibilityが非変形要素や2D変形要素に与える影響は？独自の平面に分離されて交差するのか？

4.2. パースペクティブ変形ボックスの処理

これは、与えられた行列を使って要素を厳密にどう変形するかを仕様化しようとする最初の試みです。理想的ではないかもしれませんので、実装者からのフィードバックを歓迎します。#912も参照。

累積3D変換行列は、perspectiveプロパティと、transformプロパティに含まれるperspective()変形関数の両方の影響を受けます。

この累積3D変換行列は4×4行列ですが、変形対象は二次元ボックスです。ボックスの各コーナー（a, b）を変形するには、まず(a, b, 0, 1)に行列を適用し、結果として4次元点(x, y, z, w)を得ます。これを以下のように3次元点(x′, y′, z′)に変換します：

w > 0 の場合、(x′, y′, z′) = (x/w, y/w, z/w)。

w = 0 の場合、(x′, y′, z′) = (x ⋅ n, y ⋅ n, z ⋅ n)。nは実装依存の値であり、可能ならx′やy′がビューポートサイズより十分大きくなる値を選ぶべきです。例えば、(5px, 22px, 0px, 0)は(5000px, 22000px, 0px)になるようn=1000など。ただし(0.1px, 0.05px, 0px, 0)にはこのnは小さすぎます。本仕様ではnの値は厳密には定めません。概念的には(x′, y′, z′)は(x, y, z)方向に無限遠です。

変形後のボックスの4つのコーナー全てでw < 0の場合、そのボックスは描画されません。

変形後のボックスのコーナーのうち1〜3個がw < 0の場合、その部分を切り取った多角形に置き換える必要があります。一般的には頂点が3〜5個の多角形となり、ちょうど2つがw = 0、残りはw > 0になります。これらの頂点は前述の規則で3次元点に変換されます。概念的にはw < 0の点は「視点の背後」なので表示すべきではありません。

.transformed {
  height: 100px;
  width: 100px;
  background: lime;
  transform: perspective(50px) translateZ(100px);
}

.transformed {
  height: 100px;
  width: 100px;
  background: radial-gradient(yellow, blue);
  transform: perspective(50px) translateZ(50px);
}

.transformed {
  height: 50px;
  width: 50px;
  background: lime;
  border: 25px solid blue;
  transform-origin: left;
  transform: perspective(50px) rotateY(-45deg);
}

5. 個別変形プロパティ：translate、scale、rotateプロパティ

translate、rotate、scaleプロパティは、 著者が単純な変形を個別に指定できるようにします。 これは一般的なユーザーインターフェースの使い方に合った方法であり、 transformで translate()、 rotate()、 scale()の順序を覚えておく必要なく、 それらを独立して画面座標上で動作させることができます。

translateプロパティは1～3個の値を受け付け、 それぞれX、Y、Z軸での移動量を指定します。 2番目と3番目の値が省略された場合、 デフォルトは0pxです。

3番目の値が省略または0の場合、 これは2次元の移動指定となり、 translate()関数と等価です。 それ以外の場合、 これは3次元の移動指定となり、 translate3d()関数と等価です。

注: 解決値としてのtranslateプロパティは 算出値であり、 getComputedStyle() の結果にはパーセンテージ値も含まれます。

rotateプロパティは、 要素を回転させる角度と、 オプションで回転軸を受け付けます。

軸はx、 y、 またはzキーワードで指定でき、 その軸周りに回転します。 これはrotateX()、 rotateY()、 rotateZ() 変形関数と等価です。 また、軸は原点中心のベクトル（x,y,z成分の三つの数値）で明示的に指定することもでき、 rotate3d()関数と等価です。

単なる<angle>指定と、 z軸周り（zキーワードや x,y成分が0でz成分が正のベクトル指定）の回転の間に挙動の差はありません。 いずれもrotate()関数と等価な2D回転です。 例えば、rotate: 30deg、rotate: z 30deg、rotate: 0 0 1 30degは全て同じ意味です。

scale プロパティは1～3個の値を受け付け、 それぞれX、Y、Z軸の拡大率を指定します。

Y値が指定されない場合、 X値と同じになります。

Z値が指定されない場合、 デフォルトは1です。

3番目の値が省略、1、100%のいずれかの場合、 これは2次元の拡大指定で、 scale()関数と等価です。 それ以外の場合は 3次元の拡大指定となり、 scale3d()関数と等価です。

3番目の値が省略でも、1や100%でも挙動に違いはありません。

<percentage>は<number>と等価です。 例えばscale: 100%はscale: 1と等価です。 シリアライズ時は数値が使われます。

3つのプロパティはいずれも （初期値としても） none を受け付け、 これは変形を全く行いません。 特にこの値は 積み重ねコンテキストやすべての子孫の包含ブロックを作りませんが、 それ以外の値 （translate: 0pxのような「恒等」変形も含む）は 通常通り積み重ねコンテキストやすべての子孫の包含ブロックを作ります。

translate、rotate、scaleがアニメートやトランジションしていて、from値またはto値（両方でない）がnoneの場合、noneは同等の恒等値（translateは0px、rotateは0deg、scaleは1）に置き換えられます。

5.1. シリアライズ

これらのプロパティは、「変形なし」と「変形あり」という2つの異なる挙動モードがあるため、 シリアライズ時はその点を考慮する必要があります：

translateの場合

移動が指定されている場合、 プロパティは1個〜3個の値でシリアライズされます。 （通常通り、2番目と3番目の値が0px（デフォルト）なら、あるいは3番目だけが0pxなら、 それらの0px値はシリアライズ時に省略します）。

元々noneが指定されていた場合に限り、キーワードnoneとしてシリアライズされなければなりません。 （単位変形は対象外です；その場合は0pxとしてシリアライズされなければなりません。）

rotateの場合

z軸周り（2D）の回転が指定されている場合、 プロパティは<angle>のみでシリアライズされます。

その他の回転が指定された場合、 軸も含めてシリアライズされます。 軸がxまたはyと平行な場合は、該当キーワードでシリアライズされます。

元々noneが指定されていた場合に限り、キーワードnoneとしてシリアライズされなければなりません。 （単位変形は対象外です；その場合は0degとしてシリアライズされなければなりません。）

scaleの場合

拡大率が指定されている場合、 プロパティは1個〜3個の値だけでシリアライズされます。 通常通り、3番目の値が1（デフォルト）なら、シリアライズ時に省略します。 3番目が省略され、かつ2番目が1番目と同じ（デフォルト）なら、2番目もシリアライズ時に省略します。

元々noneが指定されていた場合に限り、キーワードnoneとしてシリアライズされなければなりません。 （単位変形は対象外です；その場合は1としてシリアライズされなければなりません。）

6. 現在の変換行列

変換行列の計算手順は以下の通り修正されます：

変換行列は、transform、 transform-origin、translate、rotate、scale、offsetプロパティから次のように計算されます：

1. 恒等行列で開始する。

2. transform-originの算出X、Y、Zで平行移動する。

3. translateの算出X、Y、Zで平行移動する。

4. <angle>で指定軸周りに回転する（rotate）。

5. scaleの算出X、Y、Zで拡大する。

6. offsetで指定した変形で平行移動・回転する。

7. transform内の変形関数を左から右に乗算する。

8. transform-originの算出X、Y、Zの負値で平行移動する。

7. transform-styleプロパティ

transform-styleがpreserve-3dとなった変形可能要素は、積み重ねコンテキストとすべての子孫の包含ブロックを両方確立します。 使用値がpreserve-3dの場合、3Dレンダリングコンテキストも確立または拡張します。

7.1. グループ化プロパティ値

次のCSSプロパティ値は、子孫要素を平坦化して描画した後でないと適用できないため、preserve-3dでも使用値をflatに強制します。

• overflow: visibleまたはclip以外の値。

• opacity: 1未満の値。

• filter: none以外の値。

• clip: auto以外の値。

• clip-path: none以外の値。

• isolation: 使用値がisolate。

• mask-image: none以外の値。

• mask-border-source: none以外の値。

• mix-blend-mode: normal以外の値。

• contain: paint、および ペイント封じ込めを引き起こすその他のプロパティと値の組み合わせ。注記: これには、 contain プロパティの使用 値に影響するすべてのプロパティが含まれる。 たとえば、content-visibility: hidden などである。

8. perspectiveプロパティ

<length [0,∞]>

投影中心までの距離。

投影中心までの距離で正しいか要検証。

非常に小さい<length> 値は奇妙な描画結果や変形計算の精度問題を引き起こすため、 1px未満の値はレンダリング上は1pxとして扱う必要があります。 （この制限は値そのものには影響せず、 スタイルシート内でperspective: 0;と指定しても シリアライズ時は0となります。）

none

パースペクティブ変形は適用されません。効果は数学的には無限大<length> 値と同様です。すべてのオブジェクトはキャンバス上で平坦に見えます。

このプロパティをnone以外で使うと積み重ねコンテキストが確立されます。 また、すべての子孫の包含ブロックも確立されます（transformプロパティと同様）。

perspectiveで積み重ねコンテキスト・包含ブロックが必要かは微妙だが、Web互換性のため変更できないかも。

perspectiveおよびperspective-originの値は、上述の通りパースペクティブ行列の計算に使用されます。

9. perspective-originプロパティ

perspective-originプロパティはperspectiveプロパティの原点を定義します。これは、要素の子に対して、視点（X・Y座標）がどこにあるかを設定するものです。

perspectiveとperspective-originの値は、上記で述べたパースペクティブ行列の計算に使われます。

perspective-originの値は、reference boxの左上隅からのオフセットを表します。

<percentage>

水平方向のパーセンテージはreference boxの幅に対し、垂直方向のパーセンテージはreference boxの高さに対して相対です。水平・垂直の値は共に、reference boxの左上隅からのオフセットを表します。

<length>

長さ値は固定長のオフセットを与えます。水平・垂直ともに、reference boxの左上隅からのオフセットです。

top

1つまたは2つ値が指定された場合、垂直位置は0%となり、それ以外の場合は次のオフセットの基準が上端となります。

right

1つまたは2つ値が指定された場合、水平方向は100%となり、それ以外の場合は次のオフセットの基準が右端となります。

bottom

1つまたは2つ値が指定された場合、垂直方向は100%となり、それ以外の場合は次のオフセットの基準が下端となります。

left

1つまたは2つ値が指定された場合、水平方向は0%となり、それ以外の場合は次のオフセットの基準が左端となります。

center

水平方向が指定されていない場合は50%（left 50%）、垂直方向が指定されていれば50%（top 50%）となります。

perspective-originプロパティはheightと同じく解決値の特別扱いプロパティです。[CSSOM]

10. backface-visibilityプロパティ

backface-visibility: hiddenが指定された要素の可視性は、次のように判定されます：

1. 要素の累積3D変換行列を計算する。

2. 行列の3行3列目の成分が負の場合、その要素は非表示にする。そうでなければ表示する。

backface-visibilityはm33だけでは判定できません。#917参照。

注: この定義の理由は以下です。要素は厚みが無視できる長方形と仮定します。未変形状態の前面は(x, y, ε)、背面は(x, y, −ε)です（εは非常に小さい値）。変形後、前面がユーザー側（z値大）か背面がユーザー側かを判定します。前面のz座標は m₁₃x + m₂₃y + m₃₃ε + m₄₃、背面は m₁₃x + m₂₃y − m₃₃ε + m₄₃です。前者が後者より大きいのは m₃₃ > 0 のときのみです（0の場合は前面・背面が等距離で、たとえば90度回転で不可視となるので気にしなくてよい）。

11. SVGと3D変形関数

本仕様では、三次元変形関数が以下のコンテナ要素に適用されることを明示的に要求します： a, g, svg, すべてのグラフィック要素、すべてのグラフィック参照要素、SVGの foreignObject 要素。

三次元変形関数と、perspective、perspective-origin、transform-style、backface-visibilityは、以下の要素では使用できません： clipPath, linearGradient, radialGradient および pattern。 変形リストに三次元変形関数が含まれている場合、変形リスト全体は無視されます。これらのプロパティ値もすべて無視されます。これらの要素に含まれる変形可能要素は三次元変形関数を持てます。 clipPath, mask, pattern 要素は、子孫要素を平坦化して描画した後で適用する必要があり、そのためtransform-style: preserve-3dの挙動を上書きします。

vector-effectプロパティがnon-scaling-strokeに設定され、かつオブジェクトが3Dレンダリングコンテキスト内にある場合、ストロークには影響しません。

SVGにおける3D変形関数の構文を正式に記述すること（2D関数の仕様のように）。

12. 変形関数

transformプロパティの値は、<transform-function>のリストです。許可される変形関数のセットは以下です。本仕様で<angle>が使われている場合、0に等しい<number>も許可され、0度の角度と同じように扱われます。水平方向の移動のパーセンテージはreference boxの幅に、垂直方向はreference boxの高さに対して相対です。 scale関数のパーセンテージは数値と等価で、指定値では数値としてシリアライズされます。 例：scale3d(50%, 100%, 150%)はscale3d(0.5, 1, 1.5)としてシリアライズされます。

12.1. 2D変形関数

[css-transforms-1]で定義されたscale関数は、パーセンテージも対応するようになりました。

scale() = scale( [ <number> | <percentage> ]#{1,2} )

scaleX() = scaleX( [ <number> | <percentage> ] )

scaleY() = scaleY( [ <number> | <percentage> ] )

css-transforms-1で定義された通りですが、上記の説明のようにパーセンテージも受け付けます。

12.2. 3D変形関数

以下の3d変形関数において、<zero>は0degと同じように扱われます（単位なし0角度はレガシー互換性のため保持）。

matrix3d() = matrix3d( <number>#{16} )

列優先順の 16 個の値からなる 4×4 同次行列として 3D 変形を指定する。

translate3d() = translate3d( <length-percentage> , <length-percentage> , <length> )

ベクトル [tx,ty,tz] による 3D 平行移動を指定する。tx、ty および tz は、それぞれ 1 番目、2 番目、および 3 番目の平行移動値パラメーターである。

translateZ() = translateZ( <length> )

指定された Z 方向の量を持つベクトル [0,0,tz] による 3D 平行移動を指定する。

scale3d() = scale3d( [ <number> | <percentage> ]#{3} )

3 個のパラメーターによって記述される拡大縮小ベクトル [sx,sy,sz] による 3D 拡大縮小演算を指定する。

scaleZ() = scaleZ( [ <number> | <percentage> ] )

拡大縮小ベクトル [1,1,sz] を使用する 3D 拡大縮小演算を指定する。ここで、 sz はパラメーターとして指定される。

rotate3d() = rotate3d( <number> , <number> , <number> , [ <angle> | <zero> ] )

最初の 3 個のパラメーターによって記述される [x,y,z] 方向ベクトルを軸として、最後のパラメーターで 指定された角度による 3D 回転を指定する。[0,0,0] など、 正規化できない方向ベクトルの場合、回転は適用されない。

注記: ベクトルの終点から 原点に向かって見たとき、回転は時計回りになる。

rotateX() = rotateX( [ <angle> | <zero> ] )

rotate3d(1, 0, 0, <angle>) と同じである。

rotateY() = rotateY( [ <angle> | <zero> ] )

rotate3d(0, 1, 0, <angle>) と同じである。

rotateZ() = rotateZ( [ <angle> | <zero> ] )

rotate3d(0, 0, 1, <angle>) と同じであり、これは 2D 変形 rotate(<angle>) と等価な 3D 変形である。

perspective() = perspective( <length [0,∞]> | none )

透視投影行列を指定する。この行列は、 各点の Z 値に基づいて X および Y 方向に拡大縮小し、正の Z 値を持つ点を 原点から遠ざかるように、負の Z 値を持つ点を原点に近づくように拡大縮小する。z=0 平面上の点は変更されない。 パラメーターは、z=0 平面から観察者までの距離を表す。値が小さいほど、 ピラミッドはより平坦になり、その結果、遠近効果がより顕著になる。たとえば、1000px という値では 適度な遠近短縮が生じ、200px という値では極端な遠近短縮が生じる。

深度値が 1px 未満の場合、 レンダリングの目的、 transform の解決値の計算、 および補間の端点として使用される場合には、 1px として扱わなければならない。

注記: 1px 未満の値に関する上記の規則は、 perspective() 関数を 行列に変換する必要がある場合を対象とすることを意図している。

12.3. 変形関数のプリミティブと派生

一部の変形関数は、より汎用的な変形関数で表現できます。これらの変形関数は派生変形関数と呼び、汎用的な変形関数はプリミティブ変形関数と呼びます。三次元プリミティブとその派生変形関数は以下の通りです：

translate3d()

<translateX()>、<translateY()>、translateZ()、<translate()>のためのものです。

scale3d()

<scaleX()>、<scaleY()>、scaleZ()、<scale()>のためのものです。

rotate3d()

<rotate()>、rotateX()、rotateY()、rotateZ()のためのものです。

二次元プリミティブと三次元プリミティブの両方を持つ派生変形関数の場合、使用されるプリミティブは文脈によって決まります。詳細はプリミティブと派生変形関数の補間を参照してください。

13. 行列の補間

2つの行列を補間する場合、各行列は対応する移動量、回転、拡大率、歪み（skew）、（3D行列の場合は）パースペクティブに分解されます。分解された各行列の対応する成分を数値的に補間し、最終ステップで再度行列に合成します。

13.1. 3D行列の補間

13.1.1. 3D行列の分解

以下の疑似コードは「Graphics Gems II（Jim Arvo編集）」の"unmatrix"手法を基にしていますが、オイラー角の代わりにクォータニオンを用いることでギンバルロック問題を回避しています。

次の疑似コードは4x4同次行列に対して動作します：

Input:  matrix      ; a 4x4 matrix
Output: translation ; a 3 component vector
        scale       ; a 3 component vector
        skew        ; skew factors XY,XZ,YZ represented as a 3 component vector
        perspective ; a 4 component vector
        quaternion  ; a 4 component vector
Returns false if the matrix cannot be decomposed, true if it can


// Normalize the matrix.
if (matrix[3][3] == 0)
    return false

for (i = 0; i < 4; i++)
    for (j = 0; j < 4; j++)
        matrix[i][j] /= matrix[3][3]

// perspectiveMatrix is used to solve for perspective, but it also provides
// an easy way to test for singularity of the upper 3x3 component.
perspectiveMatrix = matrix

for (i = 0; i < 3; i++)
    perspectiveMatrix[i][3] = 0

perspectiveMatrix[3][3] = 1

if (determinant(perspectiveMatrix) == 0)
    return false

// First, isolate perspective.
if (matrix[0][3] != 0 || matrix[1][3] != 0 || matrix[2][3] != 0)
    // rightHandSide is the right hand side of the equation.
    rightHandSide[0] = matrix[0][3]
    rightHandSide[1] = matrix[1][3]
    rightHandSide[2] = matrix[2][3]
    rightHandSide[3] = matrix[3][3]

    // Solve the equation by inverting perspectiveMatrix and multiplying
    // rightHandSide by the inverse.
    inversePerspectiveMatrix = inverse(perspectiveMatrix)
    transposedInversePerspectiveMatrix = transposeMatrix4(inversePerspectiveMatrix)
    perspective = multVecMatrix(rightHandSide, transposedInversePerspectiveMatrix)
else
    // No perspective.
    perspective[0] = perspective[1] = perspective[2] = 0
    perspective[3] = 1

// Next take care of translation
for (i = 0; i < 3; i++)
    translate[i] = matrix[3][i]

// Now get scale and shear. 'row' is a 3 element array of 3 component vectors
for (i = 0; i < 3; i++)
    row[i][0] = matrix[i][0]
    row[i][1] = matrix[i][1]
    row[i][2] = matrix[i][2]

// Compute X scale factor and normalize first row.
scale[0] = length(row[0])
row[0] = normalize(row[0])

// Compute XY shear factor and make 2nd row orthogonal to 1st.
skew[0] = dot(row[0], row[1])
row[1] = combine(row[1], row[0], 1.0, -skew[0])

// Now, compute Y scale and normalize 2nd row.
scale[1] = length(row[1])
row[1] = normalize(row[1])
skew[0] /= scale[1];

// Compute XZ and YZ shears, orthogonalize 3rd row
skew[1] = dot(row[0], row[2])
row[2] = combine(row[2], row[0], 1.0, -skew[1])
skew[2] = dot(row[1], row[2])
row[2] = combine(row[2], row[1], 1.0, -skew[2])

// Next, get Z scale and normalize 3rd row.
scale[2] = length(row[2])
row[2] = normalize(row[2])
skew[1] /= scale[2]
skew[2] /= scale[2]

// At this point, the matrix (in rows) is orthonormal.
// Check for a coordinate system flip.  If the determinant
// is -1, then negate the matrix and the scaling factors.
pdum3 = cross(row[1], row[2])
if (dot(row[0], pdum3) < 0)
    for (i = 0; i < 3; i++)
        scale[i] *= -1;
        row[i][0] *= -1
        row[i][1] *= -1
        row[i][2] *= -1

// Now, get the rotations out
quaternion[0] = 0.5 * sqrt(max(1 + row[0][0] - row[1][1] - row[2][2], 0))
quaternion[1] = 0.5 * sqrt(max(1 - row[0][0] + row[1][1] - row[2][2], 0))
quaternion[2] = 0.5 * sqrt(max(1 - row[0][0] - row[1][1] + row[2][2], 0))
quaternion[3] = 0.5 * sqrt(max(1 + row[0][0] + row[1][1] + row[2][2], 0))

if (row[2][1] > row[1][2])
    quaternion[0] = -quaternion[0]
if (row[0][2] > row[2][0])
    quaternion[1] = -quaternion[1]
if (row[1][0] > row[0][1])
    quaternion[2] = -quaternion[2]

return true

13.1.2. 分解した3D行列値の補間

分解したtranslation、scale、skew、perspectiveの各成分は、元の行列と移動先行列の対応する成分同士で線形補間されます。

注: 例えば、ソース行列のtranslate[0]と、デスティネーション行列のtranslate[0]は数値的に補間され、その結果がアニメーションする要素の移動量に設定されます。

分解したソース行列のクォータニオンは、分解したデスティネーション行列のクォータニオンと球面線形補間（Slerp）で補間されます。詳細は下記の疑似コード：

Input:  quaternionA   ; a 4 component vector
        quaternionB   ; a 4 component vector
        t             ; interpolation parameter with 0 <= t <= 1
Output: quaternionDst ; a 4 component vector


product = dot(quaternionA, quaternionB)

// Clamp product to -1.0 <= product <= 1.0
product = min(product, 1.0)
product = max(product, -1.0)

if (abs(product) == 1.0)
   quaternionDst = quaternionA
   return

theta = acos(product)
w = sin(t * theta) / sqrt(1 - product * product)

for (i = 0; i < 4; i++)
  quaternionA[i] *= cos(t * theta) - product * w
  quaternionB[i] *= w
  quaternionDst[i] = quaternionA[i] + quaternionB[i]

return

13.1.3. 3D行列への再合成

補間後、得られた値はユーザースペースで要素を変形するために使用されます。これらの値を使って4x4行列に再合成する方法の一例を下記の疑似コードに示します：

Input:  translation ; a 3 component vector
        scale       ; a 3 component vector
        skew        ; skew factors XY,XZ,YZ represented as a 3 component vector
        perspective ; a 4 component vector
        quaternion  ; a 4 component vector
Output: matrix      ; a 4x4 matrix

Supporting functions (matrix is a 4x4 matrix):
  matrix  multiply(matrix a, matrix b)   returns the 4x4 matrix product of a * b

// apply perspective
for (i = 0; i < 4; i++)
  matrix[i][3] = perspective[i]

// apply translation
for (i = 0; i < 4; i++)
  for (j = 0; j < 3; j++)
    matrix[3][i] += translation[j] * matrix[j][i]

// apply rotation
x = quaternion[0]
y = quaternion[1]
z = quaternion[2]
w = quaternion[3]

// Construct a composite rotation matrix from the quaternion values
// rotationMatrix is a identity 4x4 matrix initially
rotationMatrix[0][0] = 1 - 2 * (y * y + z * z)
rotationMatrix[0][1] = 2 * (x * y - z * w)
rotationMatrix[0][2] = 2 * (x * z + y * w)
rotationMatrix[1][0] = 2 * (x * y + z * w)
rotationMatrix[1][1] = 1 - 2 * (x * x + z * z)
rotationMatrix[1][2] = 2 * (y * z - x * w)
rotationMatrix[2][0] = 2 * (x * z - y * w)
rotationMatrix[2][1] = 2 * (y * z + x * w)
rotationMatrix[2][2] = 1 - 2 * (x * x + y * y)

matrix = multiply(matrix, rotationMatrix)

// apply skew
// temp is a identity 4x4 matrix initially
if (skew[2])
    temp[2][1] = skew[2]
    matrix = multiply(matrix, temp)

if (skew[1])
    temp[2][1] = 0
    temp[2][0] = skew[1]
    matrix = multiply(matrix, temp)

if (skew[0])
    temp[2][0] = 0
    temp[1][0] = skew[0]
    matrix = multiply(matrix, temp)

// apply scale
for (i = 0; i < 3; i++)
  for (j = 0; j < 4; j++)
    matrix[i][j] *= scale[i]

return

14. プリミティブおよび派生変形関数の補間

同じ名前かつ同じ引数数を持つ2つの変形関数は、変換なしに数値的に補間されます。計算された値は、同じ変形関数型・同じ引数数になります。<matrix()>、<matrix3d()>、<perspective()>には特別なルールが適用されます。

<matrix()>、matrix3d()、perspective()の変形関数は、まず4x4行列に変換され、その後行列の補間の節で定義された方法で補間されます。

プリミティブrotate3d()で補間する場合、変形関数の方向ベクトルをまず正規化します。正規化ベクトルが一致せず、かつ両方の回転角が非ゼロの場合、変形関数はまず4x4行列に変換され、その後行列の補間の節で定義された方法で補間されます。そうでなければ、回転角だけ数値的に補間され、非ゼロ角の回転ベクトル、または両方ゼロの場合は(0, 0, 1)が使われます。

同じプリミティブを共有する型違いの変形関数、または同じ型で引数数が異なる変形関数も補間可能です。両方の変形関数はまず共通のプリミティブに変換され、その後数値的に補間されます。算出値はプリミティブ型＋補間された引数となります。

div {
  transform: translateX(100px);
}

div:hover {
  transform: translateY(100px);
  transition: transform 3s;
}

両方の変形関数が二次元空間のプリミティブを共有する場合は、両方とも二次元プリミティブに変換されます。一方または両方が三次元変形関数なら、共通の三次元プリミティブが使われます。

div {
  transform: translateX(100px);
}

div:hover {
  transform: translateZ(100px);
  transition: transform 3s;
}

15. 変形リストの加算と累積

div.animate(
  { transform: ['scale(1)', 'scale(2)'] },
  {
    duration: 1000,
    easing: 'ease',
  }
);

div.animate(
  { transform: ['scale(1)', 'scale(2)'] },
  {
    duration: 1000,
    easing: 'ease',
    iterations: 5,
    iterationComposite: 'accumulate',
  }
);

15.1. 加算のニュートラル要素

一部のアニメーションでは加算のニュートラル要素が必要です。変形関数の場合、これは0のスカラーまたは0スカラーのリストです。例としてはtranslate(0)、translate3d(0, 0, 0)、translateX(0)、translateY(0)、translateZ(0)、scale(0)、scaleX(0)、scaleY(0)、scaleZ(0)、rotate(0)、rotate3d(vx, vy, vz, 0)（vは文脈依存ベクトル）、rotateX(0)、rotateY(0)、rotateZ(0)、skew(0, 0)、skewX(0)、skewY(0)、matrix(0, 0, 0, 0, 0, 0)、matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0)、perspective(none)などが挙げられます。

注: 加算のニュートラル要素へのアニメーションや、そこからのアニメーションでは、<matrix()>、matrix3d()、perspective()は離散アニメーションにフォールバックします（§ 13 行列の補間参照）。

16. 変形関数の数学的記述

数学的には、すべての変形関数は次の形の4x4変換行列として表現できます：

$$\begin{bmatrix} m11 & m21 & m31 & m41 \\ m12 & m22 & m32 & m42 \\ m13 & m23 & m33 & m43 \\ m14 & m24 & m34 & m44 \end{bmatrix}$$

行列上の1単位の移動は、要素のローカル座標系における1ピクセルに相当します。

• パラメータtx、ty、tzによる3D移動は、次の行列と等価です：

  $$\begin{bmatrix} 1 & 0 & 0 & tx \\ 0 & 1 & 0 & ty \\ 0 & 0 & 1 & tz \\ 0 & 0 & 0 & 1 \end{bmatrix}$$

• パラメータsx、sy、szによる3Dスケールは、次の行列と等価です：

  $$\begin{bmatrix} sx & 0 & 0 & 0 \\ 0 & sy & 0 & 0 \\ 0 & 0 & sz & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix}$$

• ベクトル[x,y,z]とパラメータalphaによる3D回転は、次の行列と等価です：

  $$\begin{bmatrix} 1 - 2 \cdot (y^2 + z^2) \cdot sq & 2 \cdot (x \cdot y \cdot sq - z \cdot sc) & 2 \cdot (x \cdot z \cdot sq + y \cdot sc) & 0 \\ 2 \cdot (x \cdot y \cdot sq + z \cdot sc) & 1 - 2 \cdot (x^2 + z^2) \cdot sq & 2 \cdot (y \cdot z \cdot sq - x \cdot sc) & 0 \\ 2 \cdot (x \cdot z \cdot sq - y \cdot sc) & 2 \cdot (y \cdot z \cdot sq + x \cdot sc) & 1 - 2 \cdot (x^2 + y^2) \cdot sq & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix}$$

  ここで：

  $$sc = \sin (\alpha/2) \cdot \cos (\alpha/2)$$ $$sq = \sin^2 (\alpha/2)$$

  そしてx, y, zは正規化済み（すなわち、与えられたx, y, z値を2乗和の平方根で割ったもの）です。

  これにより、X軸回転は次のように単純化されます：

  $$\begin{bmatrix} 1 & 0 & 0 & 0 \\ 0 & 1 - 2 \cdot sq & -2 \cdot sc & 0 \\ 0 & 2 \cdot sc & 1 - 2 \cdot sq & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix}$$

  Y軸回転は次のように単純化されます：

  $$\begin{bmatrix} 1 - 2 \cdot sq & 0 & 2 \cdot sc & 0 \\ 0 & 1 & 0 & 0 \\ -2 \cdot sc & 0 & 1 - 2 \cdot sq & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix}$$

  Z軸回転は次のように単純化されます：

  $$\begin{bmatrix} 1 - 2 \cdot sq & -2 \cdot sc & 0 & 0 \\ 2 \cdot sc & 1 - 2 \cdot sq & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix}$$

• パラメータdによるパースペクティブ投影行列は、次の行列と等価です：

  $$\begin{bmatrix} 1 & 0 & 0 & 0 \\ 0 & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & -1/d & 1 \end{bmatrix}$$

  パラメータdがnoneの場合は無限大とみなし（結果の行列は恒等行列になります）。

17. SVGの transform 属性

本仕様では、新たな提示属性として transform-origin、perspective、perspective-origin、transform-style、backface-visibilityも導入されます。

新しく導入された提示属性の値は、SVGデータ型 [SVG11] の構文規則に従ってパースされます。

18. SVGアニメーション

18.1. animate 要素および set 要素

導入された提示属性 perspective、perspective-origin、transform-style、backface-visibilityはアニメーション可能です。transform-styleとbackface-visibilityは非加算型です。

19. その他の課題

https://lists.w3.org/Archives/Public/www-style/2015Mar/0371.html の通り、WGは変形を統一的な「scale」に分解する式を追加することを決定しました （仕様ではscaleX/Y/Zへの分解方法は既に定義済み）。 これはSVGのnon-scaling stroke仕様などで利用されます。式の定義はこちら。

20. セキュリティおよびプライバシーに関する考慮事項

この仕様では新たなセキュリティやプライバシーの考慮事項は導入されません。

変更履歴

最近の変更

2020年3月3日WDからの重要な変更点：

• この仕様は個別変形プロパティが2Dか3Dかの状態管理を要求しなくなり、2Dで表現可能な値は2Dとして扱うことを要求します（#3305参照）。

  注: 類似の変更は変形関数にも意図されていますが、まだ反映されていません。

• scale プロパティおよび scale()、scaleX()、scaleY() 関数がパーセンテージ対応になりました（#3399参照）。
• 仕様の複数箇所の定義を3Dレンダリングコンテキストの定義と整合するよう修正しました：
  • 3Dレンダリングコンテキストを確立する要素のborder、背景、装飾は、3Dシーン内のz=0で描画される（背後ではなく）（#6238参照）。
  • 累積3D変換行列に、確立要素のtransformや親のperspectiveを含める（#6191参照）。
• ペイント包含はグループ化プロパティであることを定義（#6202参照）。
• none引数がperspective()でサポート（#6488参照）。
• perspective()の値のクランプは解決値や補間にも適用される（#6320および#6346参照）。
• preserve-3dの効果は変形可能要素にのみ影響することを明確化（#6430参照）。
• 加算のニュートラル要素としてperspective()はperspective(none)であることを修正
• translateの解決値にパーセンテージが含まれる旨を注記追加（#2124参照）。
• 3Dソートの説明をより正確にし、どの子孫が含まれるか明示し、Appendix Eの参照を手順1〜7に限定しないよう修正（#926参照）。