CSS Transforms Module Level 1 （日本語訳）

1. 序論

~CSSの`視覚-整形~model$は、各要素が位置される座標系について述べている。この座標~空間における位置と~sizeは、原点から［右方／下方］へ増大する画素~数による正な値で表出されるものと捉えれる。 ◎ The CSS visual formatting model describes a coordinate system within each element is positioned. Positions and sizes in this coordinate space can be thought of as being expressed in pixels, starting in the origin of point with positive values proceeding to the right and down.

この座標~空間は， `transform$p ~propにより改変できる。この変形により，要素を並進させ, 回転させ, 拡縮させられる。 ◎ This coordinate space can be modified with the transform property. Using transform, elements can be translated, rotated and scaled.

1.1. ~module間の相互作用

この~moduleは、適用-対象の要素の視覚的な描画に影響する，一連の~CSS~propを定義する — これらの効果は、 `CSS2$r の`視覚-整形~model$に則って，要素の~sizeと位置が~~決定された後に適用される。これらの~propの一部の値に対しては、新たな`包含塊$が設置されたり, `積層~文脈$が確立される。 ◎ This module defines a set of CSS properties that affect the visual rendering of elements to which those properties are applied; these effects are applied after elements have been sized and positioned according to the visual formatting model from [CSS2]. Some values of these properties result in the creation of a containing block, and/or the creation of a stacking context.

変形は、 `CSS3BG$r にて指定される［ `background-attachment$p ~propに値 `fixed$v を伴う要素］上の背景~描画にも影響する。 ◎ Transforms affect the rendering of backgrounds on elements with a value of fixed for the background-attachment property, which is specified in [CSS3BG].

変形は、 `CSSOM-VIEW$r による `Element^I ~interface拡張： `getClientRects()$m, `getBoundingClientRect()$m が返す~client矩形にも影響する。 ◎ Transforms affect the client rectangles returned by the Element Interface Extensions getClientRects() and getBoundingClientRect(), which are specified in [CSSOM-VIEW].

変形は、 `~scroll可能な~overflow区画$ `CSS-OVERFLOW-3$r の算出にも影響する。 ◎ Transforms affect the computation of the scrollable overflow region as described by [CSS-OVERFLOW-3].

1.2. ~CSS値

【この節の内容は、 `~CSS日本語訳共通~page＠~CSScommon#values$に移譲。】

1.3. 各種用語

この節では、この仕様にて利用される用語を定義する： ◎ When used in this specification, terms have the meanings assigned in this section.

`変形-可能@ ◎ transformable element

次に挙げる要素が，変形-可能とされる： ◎ A transformable element is an element in one of these categories:

~CSS~box~modelにより~layoutが統制されるもの `CSS2$r — ただし，次に該当するものは除く ⇒＃ `置換され$ない行内~box, `table-column^v ~box, `table-column-group^v ~box ◎ all elements whose layout is governed by the CSS box model except for non-replaced inline boxes, table-column boxes, and table-column-group boxes [CSS2],
すべての~SVG［ `塗り~server要素$ ／ `clipPath$e 要素／ `描画-可能な要素$ ］のうち，`~text内容~要素$の子孫でないもの。 `SVG2$r ◎ all SVG paint server elements, the clipPath element and SVG renderable elements with the exception of any descendant element of text content elements [SVG2].

`変形d要素@ ◎ transformed element

`transform$p ~propの算出d値に `none^v 以外の値を伴う要素。 ◎ An element with a computed value other than none for the transform property.

`利用元~座標系@ ◎ user coordinate system

`局所~座標系@ ◎ local coordinate system

一般に，現在の~canvas上の所在と距離を定義する座標系を指す。現在の局所~座標系（利用元~座標系とも呼ばれる）とは、現在の~canvas上の座標や長さを算出する方法を定義するために利用される，現在~作動中な座標系である。 ◎ In general, a coordinate system defines locations and distances on the current canvas. The current local coordinate system (also user coordinate system) is the coordinate system that is currently active and which is used to define how coordinates and lengths are located and computed, respectively, on the current canvas.＼

現在の利用元~座標系の原点は、 `transform-box$p ~propにより指定される`基準~box$の左上隅に~~位置する。百分率~値は、この基準~boxの寸法に相対的になる。 1 単位は 1 ~CSS画素に等しい。 ◎ The current user coordinate system has its origin at the top-left of a reference box specified by the transform-box property. Percentage values are relative to the dimension of this reference box. One unit equals one CSS pixel.

`変形n行列@ ◎ transformation matrix

ある座標系から別の座標系への数学的な写像を定義する行列。 `transform$p, `transform-origin$p ~propの値から， `下で述べるとおり＠#transformation-matrix-computation$に算出される。 ◎ A matrix that defines the mathematical mapping from one coordinate system into another. It is computed from the values of the transform and transform-origin properties as described below.

`現在の変形n行列@（ CTM ） ◎ CTM — current transformation matrix）

当の要素の`局所~座標系$から`表示域~座標系$への写像を定義する行列。 ◎ A matrix that defines the mapping from the local coordinate system into the viewport coordinate system.

`~2D行列@ ◎ 2D matrix

~3x2変形n行列であるか、または ~4x4変形n行列であって，項［ `31^M, `32^M, `13^M, `23^M, `43^M, `14^M, `24^M, `34^M ］が 0 に等しく, 項［ `33^M, `44^M ］が 1 に等しいもの。 ◎ A 3x2 transformation matrix, or a 4x4 matrix where the items m31, m32, m13, m23, m43, m14, m24, m34 are equal to 0 and m33, m44 are equal to 1.

【実質的には 3×3 行列であり， ~2D`射影空間＠https://ja.wikipedia.org/wiki/%E5%B0%84%E5%BD%B1%E7%A9%BA%E9%96%93$ （すなわち，各元が 3 成分~vectorで表現される`射影平面＠https://ja.wikipedia.org/wiki/%E5%B0%84%E5%BD%B1%E5%B9%B3%E9%9D%A2$）に作用する。 ~4x4行列は、 ~3D射影空間に埋め込まれた，同じ射影平面に作用する。】

`恒等~変形-関数@ ◎ identity transform function

~4x4の単位i行列と等価な`変形-関数$ （`§ 変形-関数の数学的な記述＠#mathematical-description$を見よ）。 ◎ A transform function that is equivalent to a identity 4x4 matrix (see Mathematical Description of Transform Functions).＼

例えば，次に挙げるものは、恒等~変形-関数になる ⇒＃ `translate(0)^v, `translateX(0)^v, `translateY(0)^v, `scale(1)^v, `scaleX(1)^v, `scaleY(1)^v, `rotate(0)^v, `skew(0, 0)^v, `skewX(0)^v, `skewY(0)^v, `matrix(1, 0, 0, 1, 0, 0)^v ◎ Examples for identity transform functions are translate(0), translateX(0), translateY(0), scale(1), scaleX(1), scaleY(1), rotate(0), skew(0, 0), skewX(0), skewY(0) and matrix(1, 0, 0, 1, 0, 0).

`右から乗算-@ （ `post-multiply^en ／ `post-multiplied by^en ）

項 %A に項 %B を右から乗算するときは、 %A を %A ~MUL %B の結果に改変する。 ◎ Term A post-multiplied by term B is equal to A · B.

【この ~MUL は行列の乗算を表す（以下でも利用される）。】【 %A や %B は正方~行列に限られない。】【原文には， “（ %A を）改変する” とは記されていないが、改変するか否かは文脈によっては重要になるので，ここでは明示的に記す。改変しない必要がある場合、下の`乗算-$を用いて述べることにする。】

【ここに述べる乗算の用法は `DOMMatrix$I のそれに一致する。】

`左から乗算-@ （ `pre-multiply^en ／ `pre-multiplied by^en ）

項 %A に項 %B を左から乗算するときは、 %A を %B ~MUL %A の結果に改変する。 ◎ Term A pre-multiplied by term B is equal to B · A.

【点 %A に行列 %B を左から乗算する場合、 %A を~~縦~vector（各~成分を縦に並べた行列）と見なすことになる。】

`乗算-@ （ `multiply^en ）

項 %A, %B を乗算するときは、 %A ~MUL %B の結果を返す（ %A, %B は改変されない）。 ◎ Multiply term A by term B is equal to A · B.

【可換でないので、 %A, %B の順序は有意になる。結合律は満たすので、 3 個~以上の行列を乗算するときの~~結合~順序は有意にならない。】

2. 変形の描画~model

`transform$p ~propに `none^v 以外の値を指定した場合、適用-対象の要素に，新たな`局所~座標系$を確立させる。この~propにより指定される`変形n行列$は、要素の`局所~座標系$から描画-先への写像を与える†。 ◎ This section is normative. ◎ Specifying a value other than none for the transform property establishes a new local coordinate system at the element that it is applied to. The mapping from where the element would have rendered into that local coordinate system is given by the element’s transformation matrix.

【† 原文は，逆に写像するように読めるが、以下の記述に反するので直している（例えば `scale(0)^v は、要素の局所~座標系のすべての座標を描画-先の一点に写像する — その逆~写像は定義できない）。】

`変形n行列$は、要素の［ `transform$p, `transform-origin$p ］~propから，次に従って得られる結果の行列 %TM になる： ◎ The transformation matrix is computed from the transform and transform-origin properties as follows:

%T ~LET `transform-origin$p の算出d値が与える移動量による`~2D並進$ ◎ Start with the identity matrix. ◎ Translate by the computed X and Y of transform-origin
%TM ~SET %T の複製 ◎ ↑
`transform$p ~propで与えられる変形-関数~listを成す ~EACH( 変形-関数 %F ) に対し，順に ⇒ %TM に %F が`表現する行列＠#two-d-transform-functions$を`右から乗算-$する ◎ Multiply by each of the transform functions in transform property from left to right
%TM に %T の逆行列を`右から乗算-$する ◎ Translate by the negated computed X and Y values of transform-origin

要素の `transform$p ~propは `none^v でない： ◎ An element has a transform property that is not none.

div {
  transform-origin: 0 0;
  transform: translate(-10px, -20px) scale(2) rotate(45deg);
}

`0 0^v に設定された `transform-origin$p ~propは、省略できる。 `変形n行列$ %TM は、変形-関数［ `translate$ft, `scale$ft, `rotate$ft ］が表現する各変形n行列をこの順に`乗算-$して算出される： ◎ The transform-origin property is set to 0 0 and can be omitted. The transformation matrix TM gets computed by post-multiplying the <translate()>, <scale()> and <rotate()> <transform-function>s.

%TM ~EQ `tm-1^dgm ~MUL `tm-2^dgm ~MUL `tm-3^dgm 【！ ⋅ 】

変形は、 `変形-可能$な要素に適用される。 ◎ Transforms apply to transformable elements.

この座標~空間は、 X 軸は右方へ, Y 軸は下方へ増大する座標系である。 ◎ The coordinate space is a coordinate system with two axes: the X axis increases horizontally to the right; the Y axis increases vertically downwards.

変形nは累積的である。すなわち、要素はその親の座標系の中で局所~座標系を確立する。 ◎ Transformations are cumulative. That is, elements establish their local coordinate system within the coordinate system of their parent.

要素の`局所~座標系$の点 %P を親の`局所~座標系$の中へ写像した結果 %Q は、［要素の`変形n行列$ %TM, ~~縦~vector %P ］をこの順に`乗算-$して得られる【`~2D行列$にて述べたとおり，演算は~3D射影空間の中で遂行される】： ◎ To map a point plocal with the coordinate pair xlocal and ylocal from the local coordinate system of an element into the parent’s coordinate system, post-multiply the transformation matrix TM of the element by plocal. The result is the mapped point pparent with the coordinate pair xparent and yparent in the parent’s local coordinate system.

`tm-map-1^dgm ~EQ %TM ~MUL `tm-map-2^dgm

利用者からは、要素は，実質的にそれに適用される局所~変形に加えて，そのすべての先祖の `transform$p ~propが累積されたように見える。要素~用の`現在の変形n行列$は、これらの変形の累積により定義される。 ◎ From the perspective of the user, an element effectively accumulates all the transform properties of its ancestors as well as any local transform applied to it. The accumulation of these transforms defines a current transformation matrix (CTM) for the element.

要素の`現在の変形n行列$は、 `表示域~座標系$から要素の`変形n行列$までのすべての変形n行列を，先祖から順に`乗算-$して算出される。 ◎ The current transformation matrix is computed by post-multiplying all transformation matrices starting from the viewport coordinate system and ending with the transformation matrix of an element.

次の例には、 ~SVG文書~内に複数個の入子な要素があり，~SVG `rect$e 要素が`変形n行列$により変形される。 ◎ This example has multiple, nested elements in an SVG document. Some elements get transformed by a transformation matrix.

<svg xmlns="http://www.w3.org/2000/svg">
  <g transform="translate(-10, 20)">
    <g transform="scale(2)">
      <rect width="200" height="200" transform="rotate(45)"/>
    </g>
  </g>
</svg>

`rect^e 要素~用の`現在の変形n行列$ %CTM は、［ `translate(-10, 20)^v, `scale(2)^v, `rotate(45)^v ］が表現する各変形n行列をこの順に`乗算-$した結果になる： ◎ translate(-10, 20) computes to the transformation matrix T1 ◎ scale(2) computes to the transformation matrix T2 ◎ rotate(45) computes to the transformation matrix T3 ◎ The CTM for the SVG rect element is the result of multiplying T1, T2 and T3 in order.

%CTM ~EQ `ctm-1^dgm ~MUL `ctm-2^dgm ~MUL `ctm-3^dgm

`rect^e 要素の`局所~座標系$の点 %P を`表示域~座標系$の中へ写像した結果 %Q は、［ %CTM, %P ］をこの順に`乗算-$して得られる： ◎ To map a point plocal with the coordinate pair xlocal and ylocal from the local coordinate system of the SVG rect element into the viewport coordinate system, post-multiply the current transformation matrix CTM of the element by plocal. The result is the mapped point pviewport with the coordinate pair xviewport and yviewport in the viewport coordinate system.

`ctm-map-1^dgm ~EQ %CTM ~MUL `ctm-map-2^dgm

注記：変形nは、 ~canvas上の描画には影響するが、 ~CSS~layoutに対する効果は，~overflowに影響すること以外にない。変形は、 `CSSOM-VIEW$r にて指定される［ `Element^I ~interface拡張により公開される `getClientRects()$m, `getBoundingClientRect()$m ］による~client矩形の算出にも織り込まれる。 ◎ Note: Transformations do affect the visual rendering, but have no effect on the CSS layout other than affecting overflow. Transforms are also taken into account when computing client rectangles exposed via the Element Interface Extensions, namely getClientRects() and getBoundingClientRect(), which are specified in [CSSOM-VIEW].

div {
  transform: translate(100px, 100px);
}

この変形は、要素を X, Y 両方向に 100 画素移動する（図左が変形-前, 図右が変形-後）。 ◎ This transform moves the element by 100 pixels in both the X and Y directions.

div {
  height: 100px; width: 100px;
  transform-origin: 50px 50px;
  transform: rotate(45deg);
}

`transform-origin$p ~propにより，原点を X, Y 両方向に 50 画素ずつずらす。 `transform^p は，原点を中心に要素を時計回りに 45° 回転させる。すべての変形-関数が適用された後、原点は， X, Y 両方向に -50 画素だけ並進されて引き戻される。 ◎ The transform-origin property moves the point of origin by 50 pixels in both the X and Y directions. The transform rotates the element clockwise by 45° about the point of origin. After all transform functions were applied, the translation of the origin gets translated back by -50 pixels in both the X and Y directions.

【上の例による効果は、次と等価になる：】

div {
  height: 100px; width: 100px;
  transform-origin: 0px 0px;
  transform: translate(50px, 50px) rotate(45deg) translate(-50px, -50px);
}

div {
  height: 100px; width: 100px;
  transform: translate(80px, 80px) scale(1.5, 1.5) rotate(45deg);
}

視覚的な外観は、 `div$e 要素が右下へ ( 80px, 80px ) 並進され,【！＊原文 bottom left は誤】 150% に拡大され, 45° 回転されたかのようになる。 ◎ The visual appearance is as if the div element gets translated by 80px to the bottom left direction, then scaled up by 150% and finally rotated by 45°.

各 `transform-function$t は、対応する~4x4行列により表現できる。これらの変形は、ある点を `div^e ~boxの座標~空間から親~要素の座標~空間へ写像するときには，逆~順に`左から乗算-$される ⇒ 写像した結果の点 ~EQ ( 並進~行列 ~MUL 拡縮-行列 ~MUL 回転~行列 ) ~MUL ~~元の点 ◎ Each <transform-function> can get represented by a corresponding 4x4 matrix. To map a point from the coordinate space of the div box to the coordinate space of the parent element, these transforms get multiplied in the reverse order: • The rotation matrix gets post-multiplied by the scale matrix. • The result of the previous multiplication is then post-multiplied by the translation matrix to create the accumulated transformation matrix. • Finally, the point to map gets pre-multiplied with the accumulated transformation matrix.

【すなわち、要素は，回転され, 拡縮され, 並進される。】詳細は、 `§ 変形-関数たちが成す~list＠#transform-function-lists$ を見よ。 ◎ For more details see The Transform Function Lists.

注記：要素を入子にした上で，等価な変形を与えても、一致する描画~結果を得せることに注意： ◎ Note: The identical rendering can be obtained by nesting elements with the equivalent transforms:

<div style="transform: translate(80px, 80px)">
  <div style="transform: scale(1.5, 1.5)">
      <div style="transform: rotate(45deg)"></div>
  </div>
</div>

【何故 “逆順の構文” にされているかは、上の例から明らかであろう（仮に，~HTMLの構文が要素の属性を終了~tagに記すものであったなら、逆順にしない方が自然になろう）。】

【各~変形をそのままの順に適用するときは、次のように解釈するとよい：要素に，自身の局所~座標系を表す X, Y 軸が（この例では要素の中心を原点にとる）描かれていると考えたとき、それぞれの変形-関数は，この描かれている（すなわち，要素に固着している）座標軸を基準にする。上の例では，順序による効果が露わにならないので、次の例を考える：

transform: rotate(45deg) translate(80px, 80px);

これは、要素を 45° 回転してから, その45° 回転された座標軸 を基準に ( 80px, 80px ) 移動する — すなわち、見かけ上は，真下へ移動する（右下ではなく）。言い換えれば、 “45° 回転~眼鏡” を通して眺めている 向こう側の世界 では， ( 80px, 80px ) （右下へ）移動している。同様に：

transform: scale(2) translate(80px, 80px);

では、倍に拡大された座標軸を基準に並進が適用されるので，見かけ上の移動量は (160px, 160px) になる。また：

transform: skewX(30deg) rotate(90deg);

では、 Y 軸だけが 30° 傾いた座標軸を基準に 90° の回転が適用されるので，見かけ上は X 軸が 60°, Y 軸が 120° 回転される。】

~layoutが~CSS~box~modelにより統制される要素においては、変形~propは，`変形d要素$の周囲の内容の~flowには影響しない。しかしながら、 ~overflow区画【！の~extent 】には，`変形d要素$も織り込まれる。この挙動は、要素が`相対~位置決め$を通してずらされるときに類似する。したがって， `overflow$p ~propが［ `scroll^v ／ `auto^v ］をとる下では、［可視~区画の外側へ変形された内容も見れるようにするための~scrollbar ］が必要に応じて現れることになる。特定的には、変形は~overflow区画の~sizeを拡幅し得る（が縮短しない） — それは、変形を適用する［前, 後］における要素たちの限界域の和集合として算出される。 ◎ For elements whose layout is governed by the CSS box model, the transform property does not affect the flow of the content surrounding the transformed element. However, the extent of the overflow area takes into account transformed elements. This behavior is similar to what happens when elements are offset via relative positioning. Therefore, if the value of the overflow property is scroll or auto, scrollbars will appear as needed to see content that is transformed outside the visible area. Specifically, transforms can extend (but do not shrink) the size of the overflow area, which is computed as the union of the bounds of the elements before and after the application of transforms.

~layoutが~CSS~box~modelにより統制される要素においては、 `transform$p ~prop用の値のうち `none^v 以外は： ◎ For elements whose layout is governed by the CSS box model, any value other than none for the transform property＼

要素に`積層~文脈$を作成させる。実装は、［この作成した層を塗る際の，親の`積層~文脈$の中での積層~順序］を［要素は，その `z-index$p は `0^v をとる`有位置$な要素であった］とするときと同じにするモノトスル。変形を伴う`有位置$な要素に対しては、 `z-index$p ~propは， `CSS2$r に述べられるとおり適用される — ただし、新たな積層~文脈を常に作成するので， `auto^v は `0^v として扱うとする。 ◎ results in the creation of a stacking context. Implementations must paint the layer it creates, within its parent stacking context, at the same stacking order that would be used if it were a positioned element with z-index: 0. If an element with a transform is positioned, the z-index property applies as described in [CSS2], except that auto is treated as 0 since a new stacking context is always created.
要素にその `すべての子孫~用の包含塊@ を確立させる。要素の`~padding~box$は、［要素の子孫のうち`絶対的に位置され$るもの（`固定的に位置され$るものも含む）用の~layout ］および［要素の子孫に`固定された背景＠~CSSBG#valdef-background-attachment-fixed$ ］にも利用されることになる。 ◎ For elements whose layout is governed by the CSS box model, any value other than none for the transform property also causes the element to establish a containing block for all descendants. Its padding box will be used to layout for all of its absolute-position descendants, fixed-position descendants, and descendant fixed background attachments.

`固定的に位置され$た`すべての子孫~用の包含塊$による効果を次の~code片でデモる： ◎ To demonstrate the effect of containing block for all descendants on fixed-position descendants, the following code snippets should behave identically:

<style>
#container {
  width: 300px;
  height: 200px;
  border: 5px dashed black;
  padding: 5px;
  overflow: scroll;
}

#bloat {
  height: 1000px;
}

#child {
  right: 0;
  bottom: 0;
  width: 10%;
  height: 10%;
  background: green;
}
</style>

<div id="container" style="transform:translateX(5px);">
  <div id="bloat"></div>
  <div id="child" style="position:fixed;"></div>
</div>

次の~code片と同じに挙動する：

<div id="container" style="position:relative; z-index:0; left:5px;">
  <div id="bloat"></div>
  <div id="child" style="position:absolute;"></div>
</div>

要素の背景が~canvasへ伝播されるとき（ `CSS3BG$r `§ ~canvas背景と根~要素＠~CSSBG#root-background$, § ~canvas背景と~HTML `body^e 要素を見よ）、［当の要素／`根~要素$ ］用に指定された変形は，要素の背景には影響しない。 ◎ When the background of an element is propagated to the canvas (see CSS Backgrounds 3 § 2.11.1 The Canvas Background and the Root Element and CSS Backgrounds 3 § 2.11.2 The Canvas Background and the HTML <body> Element), that background is not affected by any transform specified for that element or for the root element.

変形から影響される（すなわち，自身または先祖~要素に変形が適用されている）要素のうち［その背景は~canvasへ伝播しないもの］に対しては、 `background-attachment$p ~prop用の値 `fixed$v は， `scroll$v であったかのように扱われる。 `background-attachment$p の算出d値は影響されない。 ◎ For elements that are effected by a transform (i.e. have a transform applied to them, or to any of their ancestor elements) and do not have their background propagated to the canvas, a value of fixed for the background-attachment property is treated as if it had a value of scroll. The computed value of background-attachment is not affected.

3. `transform^p ~prop

変形nは、 `transform$p ~propを通して，要素が描画される座標系に適用される。この~propは、 `変形-関数$たちが成す~listを包含する。座標系に対する最終的な変形nの結果は、 `§ 変形-関数の数学的な記述＠#mathematical-description$にて定義されるとおり， ~listを成す各~関数を対応する行列に換算した上で，それらの行列を乗算することにより得される。 ◎ A transformation is applied to the coordinate system an element renders into through the transform property. This property contains a list of transform functions. The final transformation value for a coordinate system is obtained by converting each function in the list to its corresponding matrix like defined in Mathematical Description of Transform Functions, then multiplying the matrices.

◎名 `transform@p ◎値 `none^v | `transform-list$t ◎初 `none^v ◎適 `変形-可能$な要素 ◎継されない ◎百 `基準~box$の~sizeに相対的 ◎ refer to the size of reference box ◎算指定されたとおり — ただし，長さは絶対~化される。 ◎ as specified, but with lengths made absolute ◎順文法に従う ◎ア変形~list — `補間~規則＠#interpolation-of-transforms$を見よ ◎ transform list, see interpolation rules ◎表終

`transform^p 用の `none^v 以外の算出d値は、 `変形の描画~model＠#transform-rendering$に述べたとおり，`包含塊$と`積層~文脈$に影響する。 ◎ Any computed value other than none for the transform affects containing block and stacking context, as described in § 3 The Transform Rendering Model.

`transform-list@t
	= `transform-function$t+

3.1. `transform-function^t の直列化

`transform-function$t を直列化するためには、文法に記された順序どおりに，個々の文法に従って直列化する — その際には ⇒＃アリな所では， `calc$f 式を避ける／アリな所では， `calc$f による変形は避ける／アリな所では，意味を変えずに成分を省略する／ ~space等で分離された~tokenは， 1 個の~spaceで~~連結する／直列化される各~commaには， 1 個の~spaceを後続させる。 ◎ To serialize the <transform-function>s, serialize as per their individual grammars, in the order the grammars are written in,＼ avoiding <calc()> expressions where possible,＼ avoiding <calc()> transformations,＼ omitting components when possible without changing the meaning,＼ joining space-separated tokens with a single space,＼ and following each serialized comma with a single space.

3.2. `transform^p の解決d値

`transform$p ~propの`解決d値は特別$である `CSSOM$r — その`解決d値$は： ◎ The transform property is a resolved value special case property. [CSSOM]

`算出d値$が `transform-list$t になる場合 ⇒ その中のすべての `transform-function$t を~4x4行列に換算してから順に乗算した結果を `matrix$ft として直列化した結果になる。 ◎ When the computed value is a <transform-list>, the resolved value is one <matrix()> function computed by the following algorithm: • Let transform be a 4x4 matrix initialized to the identity matrix. The elements m11, m22, m33 and m44 of transform must be set to 1; all other elements of transform must be set to 0. • Post-multiply all <transform-function>s in <transform-list> to transform. • Serialize transform to a <matrix()> function.
他の場合 ⇒ `算出d値$と同じになる。 ◎ For other computed values, the resolved value is the computed value.

4. `transform-origin^p ~prop

`transform$p, `transform-origin$p ~propの値は、上述に従って`変形n行列$を算出するために利用される。 ◎ The values of the transform and transform-origin properties are used to compute the transformation matrix, as described above.

指定された（成分）値の個数が ⇒＃ 1 ならば， 2 個目の値は `center$vo と見做される。 2 以下ならば， 3 個目の値は `0px^v と見做される。 ◎ If only one value is specified, the second value is assumed to be center. If one or two values are specified, the third value is assumed to be 0px.

この補完により得られた結果を成す最初の 2 個の値が，どちらも `center$vo 以外の~keyword （横, 縦いずれかに対応する~keyword）ではない場合、それらの値は，順に［横~位置（または~offset）, 縦~位置（または~offset）］を表現する。 3 個目の値は、常に Z 位置（または~offset）を表現し， `length$t 型でなければナラナイ。 ◎ If two or more values are defined and either no value is a keyword, or the only used keyword is center, then the first value represents the horizontal position (or offset) and the second represents the vertical position (or offset). A third value always represents the Z position (or offset) and must be of type <length>.

【 3 個目の値は~3D変形~用の拡張であり、この~level 1 仕様においては利用されない — `CSS-TRANSFORMS-2$r を見よ。】

`length-percentage$t: ［横／縦］~offset用の百分率は、 `基準~box$の［横幅／縦幅］に相対的になる。［横／縦］~offset値は、 `基準~box$の左上~隅からの［横／縦］~offsetを表現する。 ◎ A percentage for the horizontal offset is relative to the width of the reference box. A percentage for the vertical offset is relative to the height of the reference box. The value for the horizontal and vertical offset represent an offset from the top left corner of the reference box.
`length$t: 長さ値は、長さが固定的な`基準~box$の左上~隅からの［横／縦【および Z 方向の】］~offsetを表現する。 ◎ A length value gives a fixed length as the offset. The value for the horizontal and vertical offset represent an offset from the top left corner of the reference box.
`top@vo: 縦~位置~用の `0%^v に算出される。 ◎ Computes to 0% for the vertical position.
`right@vo: 横~位置~用の `100%^v に算出される。 ◎ Computes to 100% for the horizontal position.
`bottom@vo: 縦~位置~用の `100%^v に算出される。 ◎ Computes to 100% for the vertical position.
`left@vo: 横~位置~用の `0%^v に算出される。 ◎ Computes to 0% for the horizontal position.
`center@vo: 横~位置が指定されなかった場合、横~位置~用の `50%^v 【！left 50%】に算出される。他の場合、縦~位置~用の `50%^v 【！top 50%】に算出される。 ◎ Computes to 50% (left 50%) for the horizontal position if the horizontal position is not otherwise specified, or 50% (top 50%) for the vertical position if it is.

~CSS~layout~boxが結付けられない~SVG要素~用の初期`使用~値$は、 ~UA~stylesheet内に次が在ったかのように， `0 0^v になるとする： ◎ For SVG elements without associated CSS layout box the initial used value is 0 0 as if the user agent style sheet contained:

*:not(svg), *:not(foreignObject) > svg {
    transform-origin: 0 0;
}

`transform-origin$p の`解決d値$は、 `height^p の様に特別とする。 `CSSOM$r 【！ CSSOM1#resolved-value-special-case-property 】 ◎ The transform-origin property is a resolved value special case property like height. [CSSOM]

5. 変形~基準~box： `transform-box^p ~prop

◎名 `transform-box@p ◎値 `content-box$vb | `border-box$vb | `fill-box$vb | `stroke-box$vb | `view-box$vb ◎初 `view-box^v ◎適 `変形-可能$な要素 ◎継されない ◎百受容しない ◎算指定された~keyword ◎順文法に従う ◎ア離散的 ◎表終

`transform$p, `transform-origin$p ~propにより定義される変形nの位置と寸法は、次に挙げるいずれかとして指定される `基準~box@ に相対的になる： ◎ All transformations defined by the transform and transform-origin property are relative to the position and dimensions of the reference box of the element. The reference box is specified by one of the following:

`content-box@vb

`内容~box$を基準~boxに利用する。 ~tableの基準~boxは、その~table~boxではなく，その`~table包装~box$の~border~boxになる。 ◎ Uses the content box as reference box. The reference box of a table is the border box of its table wrapper box, not its table box.

`border-box@vb

`~border~box$を基準~boxに利用する。 ~tableの基準~boxは、その~table~boxではなく，その`~table包装~box$の~border~boxになる。 ◎ Uses the border box as reference box. The reference box of a table is the border box of its table wrapper box, not its table box.

`fill-box@vb

`~obj限界~box$を基準~boxに利用する。 ◎ Uses the object bounding box as reference box.

`stroke-box@vb

`~stroke限界~box$を基準~boxに利用する。 ◎ Uses the stroke bounding box as reference box.

`view-box@vb

最も近い`~SVG表示域$を基準~boxに利用する。 ◎ Uses the nearest SVG viewport as reference box.

【 “最も近い~SVG表示域” — `~SVG表示域を確立する要素＠~SVGcoords#EstablishingANewSVGViewport$のうち，当の要素に最も近い［先祖（または要素~自身？）］が確立したそれ。】

`~SVG表示域$を作成している【確立している】要素に `viewBox$a 属性が指定された場合： ◎ If a viewBox attribute is specified for the SVG viewport creating element:

基準~boxは `viewBox$a 属性により確立される座標系の原点に位置される。 ◎ The reference box is positioned at the origin of the coordinate system established by the viewBox attribute.
基準~boxの寸法は `viewBox$a 属性の［ `width^t, `height^t ］成分の値に設定される。 ◎ The dimension of the reference box is set to the width and height values of the viewBox attribute.

~SVG `pattern$e 要素に対しては、基準~boxは `patternUnits$a 属性により定義される。 `SVG2$r ◎ For the SVG pattern element, the reference box gets defined by the patternUnits attribute [SVG2].

~SVG［ `linearGradient$e ／ `radialGradient$e ］要素に対しては、基準~boxは `gradientUnits$a 属性により定義される。 `SVG2$r ◎ For the SVG linearGradient and radialGradient elements, the reference box gets defined by the gradientUnits attribute [SVG2].

~SVG `clipPath$e 要素に対しては、基準~boxは `clipPathUnits$a 属性により定義される。 `CSS-MASKING$r ◎ For the SVG clipPath element, the reference box gets defined by the clipPathUnits attribute [CSS-MASKING].

基準~boxは、 `transform-origin$p ~propにより指定される原点に対し，追加的な~offsetを加える。 ◎ A reference box adds an additional offset to the origin specified by the transform-origin property.

~CSS~layout~boxが結付けられない~SVG要素に対しては、 `content-box$vb 用の`使用~値$は `fill-box$vb になる。 ◎ For SVG elements without associated CSS layout box, the used value for content-box is fill-box and for border-box is stroke-box.

~CSS~layout~boxが結付けられた要素に対しては、 `fill-box$vb 用の`使用~値$は `content-box$vb になり，［ `stroke-box$vb ／ `view-box$vb ］用の`使用~値$は `border-box$vb になる。 ◎ For elements with associated CSS layout box, the used value for fill-box is content-box and for stroke-box and view-box is border-box.

6. ~SVG `transform^a 属性

6.1. ~SVGの呈示~属性

`transform-origin$p ~CSS~propは、 `呈示~属性$でもあり， `SVG2$r による既存の`呈示~属性$たちが成す~listを拡張する。 ◎ The transform-origin CSS property is also a presentation attribute and extends the list of existing presentation attributes [SVG2].

~SVG-2は、［ `transform$a ／ `patternTransform$a ／ `gradientTransform$a ］属性を`呈示~属性$として定義する — それらは、 ~CSS `transform$p ~propにより表現される。 `SVG2$r ◎ SVG 2 defines the transform, patternTransform, gradientTransform attributes as presentation attributes, represented by the CSS transform property [SVG2].

~CSS~cascadeにおけるこれらの関与は、 ~SVG仕様における`呈示~属性$の詳細度により決定される。 ~SVGに則って，~UAは、呈示~属性~用に， `新たな作者~stylesheet＠~SVGstyling#PresentationAttributes$を — 一連の`作者~stylesheet$のうち最初のものになるように — 概念的に挿入する。 `SVG2$r ◎ The participation in the CSS cascade is determined by the specificity of presentation attributes in the SVG specification. According to SVG, user agents conceptually insert a new author style sheet for presentation attributes, which is the first in the author style sheet collection [SVG2].

`transform$p ~style~propと `transform$a 属性の組合nを示す例： ◎ This example shows the combination of the transform style property and the transform attribute.

<svg xmlns="http://www.w3.org/2000/svg">
  <style>
  .container {
    transform: translate(100px, 100px);
  }
  </style>

  <g class="container" transform="translate(200 200)">
    <rect width="100" height="100" fill="blue" />
  </g>
</svg>

~CSS~cascadeに関与することから、 `transform$p ~style~propは， `transform$a 呈示~属性を上書きする。従って，容器は横と縦いずれの方向にも `200px^v ではなく `100px^v 並進される。 ◎ Because of the participation to the CSS cascade, the transform style property overrides the transform attribute. Therefore the container gets translated by 100px in both the horizontal and the vertical directions, instead of 200px.

6.2. ~SVG `transform$a 属性の構文

後方-互換性の理由から、［ `transform$a ／ `patternTransform$a ／ `gradientTransform$a ］属性の構文は， `transform$p ~CSS~propの構文から相違する。これらの属性には、 ~CSS `transform$p ~prop用に定義される追加的な `transform-function$t 用の~supportは無い — 特定的には、これらの属性は［ `translateX$ft, `translateY$ft, `scaleX$ft, `scaleY$ft, `skew$ft ］を~supportしない。 ◎ For backwards compatibility reasons, the syntax of the transform, patternTransform, gradientTransform attributes differ from the syntax of the transform CSS property. For the attributes, there is no support for additional <transform-function>s defined for the CSS transform property. Specifically, <translateX()>, <translateY()>, <scaleX()>, <scaleY()> and <skew()> are not supported by the transform, patternTransform, gradientTransform attributes.

［ `transform$a ／ `patternTransform$a ／ `gradientTransform$a ］属性~用の値は、次の~listにて，~BNF（ `Backus-Naur Form^en ）を利用して定義される。各項には、規範的でない線路図式も与えられる。 ~BNFでは、次の記法が利用される： ◎ The following list uses the Backus-Naur Form (BNF) to define values for the transform, patternTransform and gradientTransform attributes followed by an informative rail road diagram. The following notation is used:

`*^c： 0 個~以上 ◎ *: 0 or more
`+^c： 1 個~以上 ◎ +: 1 or more
`?^c： 0 個か 1 個 ◎ ?: 0 or 1
`()^c： ~group分け ◎ (): grouping
`|^c： ~~選択肢どうしを分離する ◎ |: separates alternatives
二重引用符は~literalを括る。 ~literalは、［ `英字$, 左~丸括弧, 右~丸括弧］からなる。 `CSS-SYNTAX-3$r ◎ double quotes surround literals. Literals consists of letters [CSS-SYNTAX-3], left parenthesis and right parenthesis.
`number-token$t は `CSS-SYNTAX-3$r により定義される。 ◎ <number-token> defined by the CSS Syntax module [CSS-SYNTAX-3].

注記：この構文は、各~UAにて実装された挙動を反映する — それは、 ~SVG-11に定義される構文から相違する。 ◎ Note: The syntax reflects implemented behavior in user agents and differs from the syntax defined by SVG 1.1.

左~丸括弧 `(^c ◎ left parenthesis (

`0028^U `LEFT PARENTHESIS^cn

右~丸括弧 `)^c ◎ right parenthesis )

`0029^U `RIGHT PARENTHESIS^cn

`comma@sf

`002C^U `COMMA^cn

`wsp@sf

次のいずれか ⇒＃ `000A^U `LINE FEED^cn, `000D^U `CARRIAGE RETURN^cn, `0009^U `CHARACTER TABULATION^cn, `0020^U `SPACE^cn ◎ Either a U+000A LINE FEED, U+000D CARRIAGE RETURN, U+0009 CHARACTER TABULATION, or U+0020 SPACE.

`svg-wsp^dgm

`comma-wsp@sf

(wsp+ comma? wsp*) | (comma wsp*)

`svg-comma-wsp^dgm

`translate@sf

"translate" wsp* "(" wsp* number ( comma-wsp? number )? wsp* ")"

`svg-translate^dgm

`scale@sf

"scale" wsp* "(" wsp* number ( comma-wsp? number )? wsp* ")"

`svg-scale^dgm

`rotate@sf

"rotate" wsp* "(" wsp* number ( comma-wsp? number comma-wsp? number )? wsp* ")"

`svg-rotate^dgm

`skewX@sf

"skewX" wsp* "(" wsp* number wsp* ")"

`svg-skewX^dgm

`skewY@sf

"skewY" wsp* "(" wsp* number wsp* ")"

`svg-skewY^dgm

`matrix@sf

"matrix" wsp* "(" wsp*
    number comma-wsp?
    number comma-wsp?
    number comma-wsp?
    number comma-wsp?
    number comma-wsp?
    number wsp* ")"

`svg-matrix^dgm

`transform@sf

matrix
| translate
| scale
| rotate
| skewX
| skewY

`svg-transform-function^dgm

`transforms@sf

transform
| transform comma-wsp? transforms

`svg-transforms^dgm

`transform-list@sf

wsp* transforms? wsp*

`svg-transform-list^dgm

6.3. ~SVG変形-関数

上の構文で定義される［ `transform$a ／ `patternTransform$a ／ `gradientTransform$a ］属性の~SVG変形-関数は、次に従って~CSS `transform-function$t に対応付けられる： ◎ SVG transform functions of the transform, patternTransform, gradientTransform attributes defined by the syntax above are mapped to CSS <transform-function>s as follows:

~SVG変形-関数 ◎ SVG transform function	~CSS `transform-function$t	追加的な注記 ◎ Additional notes
`translate$sf	`translate$ft	数値は、 `px$u 単位を伴う~CSS `length$t 型として解釈される。 ◎ Number values interpreted as CSS <length> types with px units.
`scale$sf	`scale$ft
`rotate$sf	`rotate$ft	引数を 1 個だけとるものに限られる。数値は、 `deg$u 単位を伴う~CSS `angle$t 型として解釈される。 ◎ Only single value version. Number value interpreted as CSS <angle> type with deg unit.
`skewX$sf	`skewX$ft	数値は、 `deg$u 単位を伴う~CSS `angle$t 型として解釈される。 ◎ Number value interpreted as CSS <angle> type with deg unit.
`skewY$sf	`skewY$ft	数値は、 `deg$u 単位を伴う~CSS `angle$t 型として解釈される。 ◎ Number value interpreted as CSS <angle> type with deg unit.
`matrix$sf	`matrix$ft

~SVG変形-関数のうち， 3 個の値を伴う `rotate$sf は、対応する~CSS `transform-function$t には対応付けれない。 1 個目の数値 %a は `deg$u 単位を伴う~CSS `angle$t 型として解釈され，回転を定義する。 2 個目, 3 個目の数値 ( %cx, %cy ) は、省略可能であり，順に［横, 縦］の並進~値を表現する — 両~数値とも `px$u 単位を伴う~CSS `length$t 型として解釈され，回転~用の原点を定義する。この関数の挙動は、次を順に適用した結果と等価になる ⇒＃ ( %cx, %cy ) による並進, %a による回転, ( −%cx, −%cy ) による並進 ◎ The SVG transform function rotate with 3 values can not be mapped to a corresponding CSS <transform-function>. The 2 optional number values represent a horizontal translation value cx followed by a vertical translation value cy. Both number values get interpreted as CSS <length> types with px units and define the origin for rotation. The behavior is equivalent to an initial translation by cx, cy, a rotation defined by the first number value interpreted as <angle> type with deg unit followed by a translation by -cx, -cy.

~SVG `transform$a 属性は、 CSS Transition の［ `開始~値$ ／ `終止~値$ ］をとり得る。 `transform$a 属性の値がそれらの値を与える場合、その `transform-list$sf 内に 3 個の値を伴う `rotate$sf 変形-関数が 1 つでも在るならば，［属性の値を成す個々の~SVG変形-関数を表現する行列を，同順に`乗算-$した結果の行列］を［ `matrix$ft ~CSS `transform-function$t に対応付けた結果］を［ `開始~値$ ／ `終止~値$ ］として利用するモノトスル。 ◎ A transform attribute can be the start or end value of a CSS Transition. If the value of a transform attribute is the start or end value of a CSS Transition and the SVG transform list contains at least one rotate transform function with 3 values, the individual SVG transform functions must get post-multiplied and the resulting matrix must get mapped to a <matrix()> CSS <transform-function> and used as start/end value of the CSS Transition.

6.4. 利用元~空間

`pattern$e 要素に対しては、［ `patternTransform$a 属性, `transform$p ~prop ］が~pattern座標系における追加的な変形nを定義する。詳細は `patternUnits$a 属性を見よ。 `SVG2$r ◎ For the pattern element, the patternTransform attribute and transform property define an additional transformation in the pattern coordinate system. See patternUnits attribute for details [SVG2].

［ `linearGradient$e ／ `radialGradient$e ］要素に対しては、［ `gradientTransform$a 属性, `transform$p ~prop ］が，~gradient座標系における追加的な変形nを定義する。詳細は `gradientUnits$a 属性を見よ。 `SVG2$r ◎ For the linearGradient and radialGradient elements, the gradientTransform attribute and transform property define an additional transformation in the gradient coordinate system. See gradientUnits attribute for details [SVG2].

`clipPath$e 要素に対しては、［ `transform$a 属性, `transform$p ~prop ］が，切抜き~path座標~空間における追加的な変形nを定義する。詳細は `clipPathUnits$a 属性を見よ。 `CSS-MASKING$r ◎ For the clipPath element, the transform attribute and transform property define an additional transformation in the clipping path coordinate space. See clipPathUnits attribute for details [CSS-MASKING].

他のすべての`変形-可能$な要素に対しては、［ `transform$a 属性, `transform$p ~prop ］が親の現在の`利用元~座標系$における変形nを定義する。 `transform$a 属性のすべての百分率~値は、要素の`基準~box$に相対的になる。 ◎ For all other transformable elements the transform attribute and transform property define a transformation in the current user coordinate system of the parent. All percentage values of the transform attribute are relative to the element’s reference box.

次の例の `pattern^e 上の `transform-origin$p ~propは、原点の［横, 縦］次元に `50%^v の並進を指定する。 `transform$p ~propも並進を指定するが，絶対~長さである。 ◎ The transform-origin property on the pattern in the following example specifies a 50% translation of the origin in the horizontal and vertical dimension. The transform property specifies a translation as well, but in absolute lengths.

<svg xmlns="http://www.w3.org/2000/svg">
  <style>
  pattern {
    transform: rotate(45deg);
    transform-origin: 50% 50%;
  }
  </style>

  <defs>
  <pattern id="pattern-1">
    <rect id="rect1" width="100" height="100" fill="blue" />
  </pattern>
  </defs>

  <rect width="200" height="200" fill="url(#pattern-1)" />
</svg>

~SVG `pattern$e 要素は限界~boxを持たないので、 `transform-origin$p ~propを相対的な値に解く際に，参照元の `rect$e 要素の`基準~box$が代わりに利用される。したがって原点は，`pattern$e 要素~内容の利用元~空間を回転させる前に，一時的に 100 画素だけ並進されることになる。 ◎ An SVG pattern element doesn’t have a bounding box. The reference box of the referencing rect element is used instead to solve the relative values of the transform-origin property. Therefore the point of origin will get translated by 100 pixels temporarily to rotate the user space of the pattern elements content.

6.5. `transform^a 属性~用の~SVG~DOM~interface

~SVG仕様では，~SVG~DOMにて~SVG［ `transform$a ／ `patternTransform$a ／ `patternTransform$a ］属性を`反映する$値【！animated and the base value】への~accessを供するための `SVGAnimatedTransformList$I ~interfaceが定義されている。後方-互換性を確保するため、 ~UAは，依然としてこの API を~supportするモノトスル。 ◎ The SVG specification defines the "SVGAnimatedTransformList" interface in the SVG DOM to provide access to the animated and the base value of the SVG transform, gradientTransform and patternTransform attributes. To ensure backwards compatibility, this API must still be supported by user agents.

`baseVal^m により、作者は~SVG［ `transform$a ／ `patternTransform$a ／ `gradientTransform$a ］属性の値に~accessしたり改変することが可能になる。 ~SVG~DOMに必要yな後方-互換性を供するため、 `baseVal^m は、この作者~stylesheetの値を反映するモノトスル。 ~SVG~DOM~obj `baseVal^m に加えられるすべての改変は、即時にこの作者~stylesheetに反映するモノトスル。 ◎ baseVal gives the author the possibility to access and modify the values of the SVG transform, patternTransform, gradientTransform attributes. To provide the necessary backwards compatibility to the SVG DOM, baseVal must reflect the values of this author style sheet. All modifications to SVG DOM objects of baseVal must affect this author style sheet immediately.

`animVal^m は、 `transform$p ~propに算出される~styleを表現する。したがってそれには、適用されている［ `CSS Transitions＠~TRANSITION$cite, `CSS Animations＠~CSSANIM$cite, `SVG Animations＠https://svgwg.org/specs/animations/$cite ］による効果もすべて含められる。算出された~style, および~SVG~DOM~objの `animVal^m は、改変できない。 ◎ animVal represents the computed style of the transform property. Therefore it includes all applied CSS3 Transitions, CSS3 Animations or SVG Animations if any of those are underway. The computed style and SVG DOM objects of animVal can not be modified.

7. 変形-関数

`transform$p ~propの値は `transform-function@t たちが成す~listである。 ~listには，以下に挙げる変形-関数が許容される。各~関数における `zero$t は `0deg^v と同じに挙動する（ “単位なしの 0” による角度は、旧来との互換性の理由から保全される）。並進~用の［横／縦］百分率~値は，`基準~box$の［横幅／縦幅］に相対的になる。 ◎ The value of the transform property is a list of <transform-function>. The set of allowed transform functions is given below. In the following functions, a <zero> behaves the same as 0deg ("unitless 0" angles are preserved for legacy compat). A percentage for horizontal translations is relative to the width of the reference box. A percentage for vertical translations is relative to the height of the reference box.

7.1. ~2D変形-関数

`matrix@f = matrix( `number$t#{6} ): 所与の 6 個の値で形成される`~2D~3x2行列$による`変形n行列$により，~2D変形nを指定する。 ◎ specifies a 2D transformation in the form of a transformation matrix of the six values a, b, c, d, e, f.
`translate@f = translate( `length-percentage$t, `length-percentage$t? ): 所与の~parameter【！廃 translation-value】 ( %tx, %ty ) による移動量~vector [ %tx, %ty ] により，`~2D並進$を指定する。省略可能な %ty は、供されなかった場合は 0 になる。 ◎ specifies a 2D translation by the vector [tx, ty], where tx is the first translation-value parameter and ty is the optional second translation-value parameter. If <ty> is not provided, ty has zero as a value.
`translateX@f = translateX( `length-percentage$t ): 所与の~parameter %tx による移動量~vector [ %tx, 0 ] により， X 方向の`~2D並進$を指定する。 ◎ specifies a translation by the given amount in the X direction.
`translateY@f = translateY( `length-percentage$t ): 所与の~parameter %ty による移動量~vector [ 0, %ty ] により， Y 方向の`~2D並進$を指定する。 ◎ specifies a translation by the given amount in the Y direction.
`scale@f = scale( `number$t, `number$t? ): 所与の~parameter ( %sx, %sy ) による拡縮ng~vector [ %sx, %sy ] により，`~2D拡縮ng$を指定する。省略可能な %sy は、供されなかった場合は %sx と等しい値をとる。例えば、 `scale(1, 1)^v ならば要素はそのままに現れるが， `scale(2, 2)^v ならば X, Y 両~軸において~~長さが 2 倍に（面積は 4 倍に）現れるようにする。 ◎ specifies a 2D scale operation by the [sx,sy] scaling vector described by the 2 parameters. If the second parameter is not provided, it takes a value equal to the first. For example, scale(1, 1) would leave an element unchanged, while scale(2, 2) would cause it to appear twice as long in both the X and Y axes, or four times its typical geometric size.
`scaleX@f = scaleX( `number$t ): 所与の~parameter %sx による拡縮ng~vector [ %sx, 1 ] により，`~2D拡縮ng$を指定する。 ◎ specifies a 2D scale operation using the [sx,1] scaling vector, where sx is given as the parameter.
`scaleY@f = scaleY( `number$t ): 所与の~parameter %sy による拡縮ng~vector [ 1, %sx ] により，`~2D拡縮ng$を指定する。 ◎ specifies a 2D scale operation using the [1,sy] scaling vector, where sy is given as the parameter.
`rotate@f = rotate( [ `angle$t | `zero$t ] ): 所与の回転角により，要素の原点~周りの`~2D回転$を指定する — 原点は、要素の `transform-origin$p ~propにより定義される。例えば `rotate(90deg)^v ならば、要素は，時計回りに 90° 回転されて現れることになる。 ◎ specifies a 2D rotation by the angle specified in the parameter about the origin of the element, as defined by the transform-origin property. For example, rotate(90deg) would cause elements to appear rotated one-quarter of a turn in the clockwise direction.
`skew@f = skew( [ `angle$t | `zero$t ], [ `angle$t | `zero$t ]? ): 所与の~parameter ( %ax, %ay ) により，`~2D斜傾$を指定する。省略可能な %ay は、供されなかった場合は 0 になる。 ◎ specifies a 2D skew by [ax,ay] for X and Y. If the second parameter is not provided, it has a zero value.; `skew$f は、互換性の理由から存在し，新たな内容には利用されるべきでない。代わりに `skewX$f ／ `skewY$f を利用するように。 `skew^f の挙動は、 `skewX^f と `skewY^f の積とは異なることに注意。 ◎ skew() exists for compatibility reasons, and should not be used in new content. Use skewX() or skewY() instead, noting that the behavior of skew() is different from multiplying skewX() with skewY().
`skewX@f = skewX( [ `angle$t | `zero$t ] ): 所与の角度により， `X 軸~不変な~2D斜傾$を指定する。 ◎ specifies a 2D skew transformation along the X axis by the given angle.; 【所与の角度だけ Y 軸が傾くよう， X 座標を Y 座標に比例する量だけずらす（ “`skew^en” する）。】
`skewY@f = skewY( [ `angle$t | `zero$t ] ): 所与の角度により， `Y 軸~不変な~2D斜傾$を指定する。 ◎ specifies a 2D skew transformation along the Y axis by the given angle.; 【所与の角度だけ Y 軸が傾くよう， Y 座標を X 座標に比例する量だけずらす（ “`skew^en” する）。】

7.2. 原始関数とその派生

一部の変形-関数は、より汎用な変形-関数の特殊な場合として表現できる。後者は ~~原始関数（ `primitive transform functions^en, または単に `primitive^en ），前者はその ~~派生関数（ `derived transform function^en ）と呼ばれる。 ~2Dにおける原始関数と, その派生関数は： ◎ Some transform functions can be represented by more generic transform functions. These transform functions are called derived transform functions, and the generic transform functions are called primitive transform functions. Two-dimensional primitives and their derived transform functions are:

原始関数	派生関数
`translate$f	`translateX$f, `translateY$f, `translate$f ◎ for <translateX()>, <translateY()> and <translate()>.
`scale$f	`scaleX$f, `scaleY$f, `scale$f ◎ for <scaleX()>, <scaleY()> and <scale()>.

8. 変形-関数たちが成す~list

`transform-function$t たちが成す~listが供された場合、その正味の効果は，各~変形-関数が供された順序により別々に指定されていたかのようになる。 ◎ If a list of <transform-function>s is provided, then the net effect is as if each transform function had been specified separately in the order provided.

すなわち，他の［位置や寸法に影響する~style付け］が無い下では、一連の入子な変形は，［先祖の座標系から要素の局所~座標系に適用される変形-関数【？】］からなる，単独の~listと等価になる。結果の変形は、変形たちが成す~listにより与えられる各~行列の積になる。 ◎ That is, in the absence of other styling that affects position and dimensions, a nested set of transforms is equivalent to a single list of transform functions, applied from the coordinate system of the ancestor to the local coordinate system of a given element. The resulting transform is the matrix multiplication of the list of transforms.

例えば： ◎ For example,

<div style="transform: translate(-10px, -20px) scale(2) rotate(45deg)"/>

は、機能的に次と等価になる： ◎ is functionally equivalent to:

<div style="transform: translate(-10px, -20px)" id="root">
  <div style="transform: scale(2)">
    <div style="transform: rotate(45deg)">
    </div>
  </div>
</div>

変形-関数が表現する ~objに対する`現在の変形n行列$が，不可逆である場合、その~objやその内容は表示されなくなる。 ◎ If a transform function causes the current transformation matrix of an object to be non-invertible, the object and its content do not get displayed.

次の例における~objは， 0 倍に拡縮される： ◎ The object in the following example gets scaled by 0.

<style>
.box {
transform: scale(0);
}
</style>

<div class="box">
Not visible
</div>

この拡縮-法は、 `div^e ~boxの座標~空間~用の`現在の変形n行列$を不可逆にする。したがって、 `div^e ~boxもその中の~textも表示されない。 ◎ The scaling causes a non-invertible CTM for the coordinate space of the div box. Therefore neither the div box, nor the text in it get displayed.

11. 変形どうしの補間

2 つの変形-関数~list 値A, 値B の`補間$は、次に従って遂行される： ◎ Interpolation of transform function lists is performed as follows:

~IF［値A ~EQ `none^v ］~AND［値B ~EQ `none^v ］ ⇒ ~RET `none^v ◎ If both Va and Vb are none: • Vresult is none.
~IF［値A ~EQ `none^v ］ ⇒ 値A ~SET 空~list ◎ ↓
~IF［値B ~EQ `none^v ］ ⇒ 値B ~SET 空~list ◎ Treating none as a list of zero length,
~IF［値A の長さ ~NEQ 値B の長さ］ ⇒ 両~listの長さが同じになるまで，短い方の~listに［長い方の~listと同じ~indexに位置する変形-関数と同じ名前の`恒等~変形-関数$ ］を付加する ◎ if Va or Vb differ in length: • extend the shorter list to the length of the longer list, setting the function at each additional position to the identity transform function matching the function at the corresponding position in the longer list. Both transform function lists are then interpolated following the next rule.

例えば，［値A ~EQ `scale(2)^v, 値B ~EQ `none^v ］ならば、［値B 用に値 `scale(1)^v を利用する］下で，以降の補間を続行することになる。同様に，［値A ~EQ `scale(1)^v, 値B ~EQ `scale(2) rotate(50deg)^v ］ならば、補間は［値A ~EQ `scale(1) rotate(0)^v ］であったかのように遂行されることになる。 ◎ For example, if Va is scale(2) and Vb is none then the value scale(1) will be used for Vb and interpolation will proceed using the next rule. Similarly, if Va is scale(1) and Vb is scale(2) rotate(50deg) then the interpolation will be performed as if Va were scale(1) rotate(0).
%結果 ~LET 空~list ◎ Let Vresult be an empty list.＼
%N ~LET 次を満たす最~大な整数 ⇒ ［ %N ~IN { 0 〜値A の長さ } ］~AND［どの整数 %i ~IN { 0 〜 %N ~MINUS 1 } に対しても，次が満たされる］ ⇒ 値A[ %i ], 値B[ %i ] は、同じ名前の関数であるか同じ`原始関数$からの派生である† ◎ Beginning at the start of Va and Vb, compare the corresponding functions at each position:
~EACH( 整数 %i ~IN { 0 〜 %N ~MINUS 1 } ) に対し ⇒ %結果に［ ( 値A[ %i ], 値B[ %i ] ) を `§ 原始関数と派生関数の補間＠#interpolation-of-transform-functions$ に則って補間した結果］を付加する ◎ While the functions have either the same name, or are derivatives of the same primitive transform function, interpolate the corresponding pair of functions as described in § 11 Interpolation of primitives and derived transform functions and append the result to Vresult.
~IF［ %N ~LT 値A の長さ ~MINUS 1 ］ ⇒ %結果に［ ( 次に与える 2 つの~4x4行列 ) を `§ 行列どうしの補間＠#matrix-interpolation$ に則って補間した結果］を付加する：
1. 単位i行列に［値A を成す %N 番~以降の変形-関数を表現する各~行列］を~list順に`右から乗算-$した結果
2. 単位i行列に［値B を成す %N 番~以降の変形-関数を表現する各~行列］を~list順に`右から乗算-$した結果
◎ If the pair do not have a common name or primitive transform function, post-multiply the remaining transform functions in each of Va and Vb respectively to produce two 4x4 matrices. Interpolate these two matrices as described in § 12 Interpolation of Matrices, append the result to Vresult, and cease iterating over Va and Vb.
~RET %結果 ◎ ↑

例えば［値A ~EQ `rotate(0deg) scale(1) translate(20px)^v, 値B ~EQ `rotate(360deg) translate(10px) scale(2)^v 【！ 270deg 誤記】］であった場合：

(A) 両~listの最初の関数［ `rotate(0deg)^v, `rotate(360deg)^v ］は、 `§ 原始関数と派生関数の補間＠#interpolation-of-transform-functions$ に則って補間される。
(B) 一方で，両~listの残り — `scale(1) translate(20px)^v, `translate(10px) scale(2)^v — は、先ず等価な~4x4行列に換算されてから， `§ 行列どうしの補間＠#matrix-interpolation$ に則って補間される。

この仕様の以前の~versionでは、 ~list内に上の %N を定義する~~条件（†）を満たさない変形-関数が一つでもある場合には（すなわち %N ~LT ~listの長さ）， (A) による補間を試みていなかった。その結果、この例の両~listは (B) のみを利用して補間され，後者の~listを成す `rotate(360deg)^v 成分は失われていた。

◎ For example, if Va is rotate(0deg) scale(1) translate(20px) and Vb is rotate(270deg) translate(10px) scale(2), the rotate(0deg) and rotate(360deg) functions will be interpolated according to § 11 Interpolation of primitives and derived transform functions while the remainder of each list—scale(1) translate(20px) and translate(10px) scale(2)—will first be converted to equivalent 4x4 matrices and then interpolated as described in § 12 Interpolation of Matrices. ◎ A previous version of this specification did not attempt to interpolate matching pairs of transform functions unless all functions in the list matched. As a result, the two lists in this example would be interpolated using matrix interpolation only and the rotate(360deg) component of the second list would be lost.

一部の~animationにおいては，変形n行列が特異的 — 言い換えれば不可逆になる。例えば，拡縮率が 1 から −1 へ変動する~animationなど。行列がその種の状態に陥った時点では、 `変形d要素$は描画されないとする。 ◎ In some cases, an animation might cause a transformation matrix to be singular or non-invertible. For example, an animation in which scale moves from 1 to -1. At the time when the matrix is in such a state, the transformed element is not rendered.

12. 原始関数と派生関数の補間

2 つの変形-関数は、名前も引数の個数も同じならば，前節による換算を要することなく数量的に補間できる。その計算-結果は、同じ個数の引数を伴う同じ型の変形-関数になる。 `matrix$ft については、特別な規則が適用される： ◎ Two transform functions with the same name and the same number of arguments are interpolated numerically without a former conversion. The calculated value will be of the same transform function type with the same number of arguments. Special rules apply to <matrix()>.

2 つの変形-関数 `translate(0)^v, `translate(100px)^v は、同じ型であり, 引数の個数も同じなので，数量的に補間できる。 `translateX(100px)^v や `translate(100px, 0)^v は，それらとは［型／引数の個数］いずれかが異なるので、それらの変形-関数と補間するためには，その前に前節による換算を要する。 ◎ The two transform functions translate(0) and translate(100px) are of the same type, have the same number of arguments and therefore can get interpolated numerically. translateX(100px) is not of the same type and translate(100px, 0) does not have the same number of arguments, therefore these transform functions can not get interpolated without a former conversion step.

2 つの変形-関数は、［型が異っていても，同じ原始関数から派生している／引数の個数が異なっていても，型が同じ］ならば、補間できる。いずれにせよ，両 ~変形-関数は、まず前節による共通な原始関数への換算を要する — それから，数量的に補間される。算出d値は、補間した結果の引数を伴う原始関数になる。 ◎ Two different types of transform functions that share the same primitive, or transform functions of the same type with different number of arguments can be interpolated. Both transform functions need a former conversion to the common primitive first and get interpolated numerically afterwards. The computed value will be the primitive with the resulting interpolated arguments.

次の例は、 `div^e ~box上で~hoverされている間， 3 秒間かけて `translateX(100px)^v から `translateY(100px)^v へ遷移させる。いずれの変形-関数も，同じ原始関数 `translate$f から派生するので、補間が可能になる。 ◎ The following example describes a transition from translateX(100px) to translateY(100px) in 3 seconds on hovering over the div box. Both transform functions derive from the same primitive translate() and therefore can be interpolated.

div {
  transform: translateX(100px);
}

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

両~変形-関数は、遷移の時点に，共通な原始関数へ変形される。 `translateX(100px)^v は `translate(100px, 0)^v に換算され、 `translateY(100px)^v は `translate(0, 100px)^v に換算される。両~変形-関数は、それから，数量的に補間できるようになる。 ◎ For the time of the transition both transform functions get transformed to the common primitive. translateX(100px) gets converted to translate(100px, 0) and translateY(100px) gets converted to translate(0, 100px). Both transform functions can then get interpolated numerically.

両~変形-関数が，ある~2D原始関数を共有する場合、それらは当の~2D原始関数に換算される。どちらかが~3D変形-関数である場合、共通な~3D原始関数が利用される。 ◎ If both transform functions share a primitive in the two-dimensional space, both transform functions get converted to the two-dimensional primitive. If one or both transform functions are three-dimensional transform functions, the common three-dimensional primitive is used.

この例では，共通な原始関数は `translate3d$f になるので、 ~2D~変形-関数は~3D~変形-関数に換算され，それから~animateされる。 ◎ In this example a two-dimensional transform function gets animated to a three-dimensional transform function. The common primitive is translate3d().

div {
  transform: translateX(100px);
}

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

`translateX(100px)^v は `translate3d(100px, 0, 0)^v に換算され、 `translateZ(100px)^v は `translate3d(0, 0, 100px)^v に換算される。換算された両~変形-関数は，数量的に補間される。 ◎ First translateX(100px) gets converted to translate3d(100px, 0, 0) and translateZ(100px) to translate3d(0, 0, 100px) respectively. Then both converted transform functions get interpolated numerically.

13. 行列どうしの補間

2 つの行列の合間を補間するときは：

各~行列を［並進, 回転, 拡縮, 斜傾］に分解する。
結果の 2 つの分解形を成す対応している行列どうしを数量的に補間する。
結果の行列たちを 1 つの行列に再構成する。

◎ When interpolating between two matrices, each matrix is decomposed into the corresponding translation, rotation, scale, skew. Each corresponding component of the decomposed matrices gets interpolated numerically and recomposed back to a matrix in a final step.

次の例では、 ~hoverされている間に，要素を X, Y 両方向に 100 画素~並進させた上で, 1170° 回転させる。初期~時の変形nは 45° 回転にされていて，遷移を利用して~animateされる。作者は、時計回りに, 3 周＋四半周（ 1170° ）回転するものと期待するかもしれないが… ◎ In the following example the element gets translated by 100 pixel in both the X and Y directions and rotated by 1170° on hovering. The initial transformation is 45°. With the usage of transition, an author might expect a animated, clockwise rotation by three and a quarter turns (1170°).

<style>
div {
  transform: rotate(45deg);
}
div:hover {
  transform: translate(100px, 100px) rotate(1215deg);
  transition: transform 3s;
}
</style>

<div></div>

［値A を成す変形- `rotate(45deg)^v ］に含まれる関数の個数は，［値B を成す変形- `translate(100px, 100px) rotate(1125deg)^v ］に含まれる関数の個数と異なるので、 `§ 変形どうしの補間＠#interpolation-of-transforms$ を成す最後の規則に従って，両~変形とも行列~補間により補間するモノトスル。その結果、変形n関数から行列への換算の際に， 3 周分（ 1080° ）についての情報は失われ、要素は四半周（ 90° ）だけ回転される。 ◎ The number of transform functions on the source transform rotate(45deg) differs from the number of transform functions on the destination transform translate(100px, 100px) rotate(1125deg). According to the last rule of Interpolation of Transforms, both transforms must be interpolated by matrix interpolation. With converting the transformation functions to matrices, the information about the three turns gets lost and the element gets rotated by just a quarter turn (90°).

上の例で 3 周＋四半周を得るためには、［値A を成す変形, 値B を成す変形］が［ `§ 変形どうしの補間＠#interpolation-of-transforms$ における 4【！3】段~目の規則］を満たすよう，値A を成す変形を次の様な形にする必要がある ⇒ `translate(0, 0) rotate(45deg)^v ◎ To achieve the three and a quarter turns for the example above, source and destination transforms must fulfill the third rule of Interpolation of Transforms. Source transform could look like translate(0, 0) rotate(45deg) for a linear interpolation of the transform functions.

以下では、［ `2 つの~2D行列どうしの補間＠#interpolation-of-2d-matrices$, どちらかは`~2D行列$でない 2 つの行列どうしの補間］を~~別々に~~扱う。 ◎ In the following we differ between the interpolation of two 2D matrices and the interpolation of two matrices where at least one matrix is not a 2D matrix.

補間されるどちらかの行列が不可逆である場合、利用される~animation関数は — 関連な~animation仕様の規則に則って — 離散的~animationに~fall-backするモノトスル。 ◎ If one of the matrices for interpolation is non-invertible, the used animation function must fall-back to a discrete animation according to the rules of the respective animation specification.

13.1. 補助関数

以下の各節における疑似-~codeでは、次に挙げる補助関数が利用される： ◎ The pseudo code in the next subsections make use of the following supporting functions:

値~型［ double, point, matrix, vector ］は，順に［ ~scalar, 3 成分~vector, ~4x4行列, 4 成分~vector ］を表す。

double determinant(matrix)	行列式
matrix inverse(matrix)	逆行列
matrix transpose(matrix)	転置行列
matrix multiply(matrix, matrix)	行列の乗算
point multVecMatrix(point, matrix)	~vectorを行列で乗算する（写像する）。
double length(point)	~vectorの~~長さ
point normalize(point)	~vectorを~~長さ 1 に正規化する
double dot(point, point)	2 個の~vectorの点乗積
double sqrt(double)	~scalarの二乗根
double max(double, double)	2 個の~scalarの最大値
double dot(vector, vector)	2 個の~vectorの点乗積
vector multVector(vector, vector)	2 個の~vectorの積【利用されていない】
double cos(double)	余弦
double sin(double)	正弦
double acos(double)	逆余弦
double abs(double)	絶対~値
double rad2deg(double)	~radianを度数に換算する
double deg2rad(double)	度数を~radianに換算する
point combine(point, point, double, double)	下を見よ（ ~3D行列~分解にて利用される）

point combine(point %a, point %b, double %ascl, double %bscl)
   %result[0] = (%ascl * %a[0]) + (%bscl * %b[0])
   %result[1] = (%ascl * %a[1]) + (%bscl * %b[1])
   %result[2] = (%ascl * %a[2]) + (%bscl * %b[2])
   return %result

Supporting functions (point is a 3 component vector, matrix is a 4x4 matrix, vector is a 4 component vector):
  double  determinant(matrix)          returns the 4x4 determinant of the matrix
  matrix  inverse(matrix)              returns the inverse of the passed matrix
  matrix  transpose(matrix)            returns the transpose of the passed matrix
  point   multVecMatrix(point, matrix) multiplies the passed point by the passed matrix
                                       and returns the transformed point
  double  length(point)                returns the length of the passed vector
  point   normalize(point)             normalizes the length of the passed point to 1
  double  dot(point, point)            returns the dot product of the passed points
  double  sqrt(double)                 returns the root square of passed value
  double  max(double y, double x)      returns the bigger value of the two passed values
  double  dot(vector, vector)         returns the dot product of the passed vectors
  vector  multVector(vector, vector)  multiplies the passed vectors
  double  sqrt(double)                returns the root square of passed value
  double  max(double y, double x)     returns the bigger value of the two passed values
  double  min(double y, double x)     returns the smaller value of the two passed values
  double  cos(double)                 returns the cosines of passed value
  double  sin(double)                 returns the sine of passed value  
  double  acos(double)                returns the inverse cosine of passed value
  double  abs(double)                  returns the absolute value of the passed value
  double  rad2deg(double)              transforms a value in radian to degree and returns it
  double  deg2rad(double)              transforms a value in degree to radian and returns it

Decomposition also makes use of the following function:
  point combine(point a, point b, double ascl, double bscl)
      result[0] = (ascl * a[0]) + (bscl * b[0])
      result[1] = (ascl * a[1]) + (bscl * b[1])
      result[2] = (ascl * a[2]) + (bscl * b[2])
      return result

13.2. ~2D行列どうしの補間

13.2.1. ~2D行列の分解-法

以下の疑似-~codeは、 `Graphics Gems II, edited by Jim Arvo^cite による “`unmatrix^en” 手法に基づく： ◎ The pseudo code below is based upon the "unmatrix" method in "Graphics Gems II, edited by Jim Arvo".

疑似-~codeにおける行列は、列主導順を利用する。すなわち，行列~~成分を指す［ 1 個目, 2 個目］の~indexは、順に［ ~column, ~row ］の~indexを表現する。 ◎ Matrices in the pseudo code use the column-major order. The first index on a matrix entry represents the column and the second index represents the row.

入力:
   %matrix      ; ~4x4行列
出力:
   %translate ; 2 成分~vector
   %scale       ; 2 成分~vector
   %angle       ; 回転
   %m11, %m12, %m21, %m22   ; 2x2 行列の各~成分

`行列の分解が［ 可能なら true ／ 不能なら false ］を返す。^cmt

double %row0x = %matrix[0][0]
double %row0y = %matrix[0][1]
double %row1x = %matrix[1][0]
double %row1y = %matrix[1][1]

%translate[0] = %matrix[3][0]
%translate[1] = %matrix[3][1]

%scale[0] = sqrt(%row0x * %row0x + %row0y * %row0y)
%scale[1] = sqrt(%row1x * %row1x + %row1y * %row1y)

`行列式が負である場合は，一方の軸を反転する^cmt
double %determinant = %row0x * %row1y - %row0y * %row1x
if (%determinant < 0) {
    `小さい方の単位~vector点乗積により，軸を反転する^cmt
    if (%row0x < %row1y) {
        %scale[0] = -%scale[0]
    } else {
        %scale[1] = -%scale[1]
    }
}
`行列から拡縮~分を除去して正規化する^cmt
if (%scale[0]) {
    %row0x *= 1 / %scale[0]
    %row0y *= 1 / %scale[0]
}
if (%scale[1]) {
    %row1x *= 1 / %scale[1]
    %row1y *= 1 / %scale[1]
}
`回転を算出して行列を再度~正規化する^cmt
%angle = atan2(%row0y, %row0x); 

if (%angle) {
    // -%angle 回転    = [cos(%angle), sin(%angle), -sin(%angle), cos(%angle)]
    //                = [%row0x, -%row0y, %row0y, %row0x]
    // Thanks to the normalization above.
    double %sn = -%row0y
    double %cs = %row0x
    double %m11 = %row0x
    double %m12 = %row0y
    double %m21 = %row1x
    double %m22 = %row1y
    %row0x = %cs * %m11 + %sn * %m21
    %row0y = %cs * %m12 + %sn * %m22
    %row1x = -%sn * %m11 + %cs * %m21
    %row1y = -%sn * %m12 + %cs * %m22
}

%m11 = %row0x
%m12 = %row0y
%m21 = %row1x
%m22 = %row1y

`回転~関数~用に度数に換算する^cmt
%angle = rad2deg(%angle)

return true

13.2.2. 分解形~2D行列~値どうしの補間

2 個の分解形~2D行列~値を補間する前に，次を行う： ◎ Before two decomposed 2D matrix values can be interpolated, the following

入力:
   %translationA ; 2 成分~vector
   %scaleA       ; 2 成分~vector
   %angleA       ; 回転
   %mA11, %mA12, %mA21, %mA22   ; 2x2 行列の各~成分

   %translationB ; 2 成分~vector
   %scaleB       ; 2 成分~vector
   %angleB       ; 回転
   %mB11, %mB12, %mB21, %mB22   ; 2x2 行列の各~成分

`一方の x-軸と他方の y-軸が反転されている場合、回転を反転されていない形に戻す。^cmt

if ((%scaleA[0] < 0 && %scaleB[1] < 0) || (%scaleA[1] < 0 && %scaleB[0] < 0))
    %scaleA[0] = -%scaleA[0]
    %scaleA[1] = -%scaleA[1]
    %angleA += %angleA < 0 ? 180 : -180

`回転は弧が短い方を選ぶ^cmt
if (!%angleA)
    %angleA = 360
if (!%angleB)
    %angleB = 360

if (abs(%angleA - %angleB) > 180)
    if (%angleA > %angleB)
        %angleA -= 360
    else 
        %angleB -= 360

以下、値A を成す行列を分解して得られた各~成分~値［並進, 拡縮, 角度, [ `11^M 〜 `22^M ] ］は、対応する値B を成す行列の各~成分との間で，線型に補間される。 ◎ Afterwards, each component of the decomposed values translation, scale, angle, m11 to m22 of the source matrix get linearly interpolated with each corresponding component of the destination matrix.

13.2.3. ~2D行列への再構成-法

補間~後の結果の値が，要素の利用元~空間を変形するときに利用される。これらの値は~4x4行列に再構成するために利用される。これは、次の疑似-~codeにより行える： ◎ After interpolation, the resulting values are used to transform the elements user space. One way to use these values is to recompose them into a 4x4 matrix. This can be done following the pseudo code below:

入力:
   %translate ; 2 成分~vector
   %scale       ; 2 成分~vector
   %angle       ; 回転
   %m11, %m12, %m21, %m22   ; 2x2 行列の各~成分
出力:
   %matrix      ; 単位i行列に初期化された~4x4行列

%matrix[0][0] = %m11
%matrix[0][1] = %m12
%matrix[1][0] = %m21
%matrix[1][1] = %m22

`並進~行列^cmt
%matrix[3][0] = %translate[0] * %m11 + %translate[1] * %m21
%matrix[3][1] = %translate[0] * %m12 + %translate[1] * %m22

`回転~行列^cmt
%angle = deg2rad(%angle);
double %cosAngle = cos(%angle);
double %sinAngle = sin(%angle);

`単位i行列に初期化された，~4x4行列による新たな一時変数 rotateMatrix^cmt
%rotateMatrix[0][0] = %cosAngle
%rotateMatrix[0][1] = %sinAngle
%rotateMatrix[1][0] = -%sinAngle
%rotateMatrix[1][1] = %cosAngle

%matrix = post-multiply(%rotateMatrix, %matrix)

`matrix を拡縮^cmt
%matrix[0][0] *= %scale[0]
%matrix[0][1] *= %scale[0]
%matrix[1][0] *= %scale[1]
%matrix[1][1] *= %scale[1]

14. 変形-関数の数学的な記述

すべての変形-関数は、次のような形の~4x4変形n行列として数学的に表現できる： ◎ Mathematically, all transform functions can be represented as 4x4 transformation matrices of the following form:

`4x4matrix^dgm ◎ \begin{bmatrix} m11 & m21 & m31 & m41 \\ m12 & m22 & m32 & m42 \\ m13 & m23 & m33 & m43 \\ m14 & m24 & m34 & m44 \end{bmatrix}

【この仕様における行列は、座標を~~縦~vectorと見なして左から作用し、子の局所~座標系から親の局所~座標系への変形を与える。】【 ~3D空間の点 ( %x, %y, %z ) （ ~2D空間の場合は %z ~EQ 0 ）は、 ~~縦~vector ( %x, %y, %z, 1 ) と同一視される。】

行列~上の並進の 1 単位は、要素の局所~座標系の 1 画素と等価になる。 ◎ One translation unit on a matrix is equivalent to 1 pixel in the local coordinate system of the element.

6 個の~parameter［ %a, %b, %c, %d, %e, %f ］による `~2D~3x2行列@ は、次の行列と等価になる： ◎ A 2D 3x2 matrix with six parameters a, b, c, d, e and f is equivalent to the matrix:

`matrix^dgm ◎ \begin{bmatrix} a & c & 0 & e \\ b & d & 0 & f \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix}
移動量~vector [ %tx, %ty ] による `~2D並進@ は、移動量~vector [ %tx, %ty, 0 ] による`~3D並進$（すなわち，次の行列）と等価になる： ◎ A 2D translation with the parameters tx and ty is equivalent to a 3D translation where tz has zero as a value.

`translate2D^dgm ◎ \begin{bmatrix} 1 & 0 & 0 & tx \\ 0 & 1 & 0 & ty \\ 0 & 0 & 1 & tz \\ 0 & 0 & 0 & 1 \end{bmatrix}
拡縮ng~vector [ %sx, %sy ] による `~2D拡縮ng@ は、拡縮ng~vector [ %sx, %sy, 1 ] による`~3D拡縮ng$（すなわち，次の行列）と等価になる： ◎ A 2D scaling with the parameters sx and sy is equivalent to a 3D scale where sz has one as a value.

`scale2D^dgm ◎ \begin{bmatrix} sx & 0 & 0 & 0 \\ 0 & sy & 0 & 0 \\ 0 & 0 & sz & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix}
回転角 %α による `~2D回転@ は、［軸~vector [ 0, 0, 1 ], 回転角 %α ］による`~3D回転$（すなわち，次の行列）と等価になる： ◎ A 2D rotation with the parameter alpha is equivalent to a 3D rotation with the vector [x,y,z] where x has zero as a value, y has zero as a value, z has one as a value, and the parameter alpha.

`rot2D^dgm ◎ \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} ◎ where: ◎ \newline sc = \sin (\alpha/2) \cdot \cos (\alpha/2) \newline sq = \sin^2 (\alpha/2)
~parameter %α, %β による~2D斜傾の様な変形nは、次の行列と等価になる： ◎ A 2D skew like transformation with the parameters alpha and beta is equivalent to the matrix:

`skew^dgm ◎ \begin{bmatrix} 1 & \tan(\alpha) & 0 & 0 \\ \tan(\beta) & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix}
角度 %α による `X 軸~不変な~2D斜傾@ は、次の行列と等価になる： ◎ A 2D skew transformation along the X axis with the parameter alpha is equivalent to the matrix:

`skewX^dgm ◎ \begin{bmatrix} 1 & \tan(\alpha) & 0 & 0 \\ 0 & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix}
角度 %β による `Y 軸~不変な~2D斜傾@ は、次の行列と等価になる： ◎ A 2D skew transformation along the Y axis with the parameter beta is equivalent to the matrix:

`skewY^dgm ◎ \begin{bmatrix} 1 & 0 & 0 & 0 \\ \tan(\beta) & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix}

~privacy／~securityの考慮点

~UAは、攻撃者が［計時~攻撃を仕掛けることにより【！and】，情報を推定する］ことはできない仕方で，変形-演算を実装するモノトスル。 ◎ UAs must implement transform operations in a way attackers can not infer information and mount a timing attack.

計時~攻撃は、演算にかかる時間を学習することに基づいて，他では保護される［内容についての情報］を得する手法である。 ◎ A timing attack is a method of obtaining information about content that is otherwise protected, based on studying the amount of time it takes for an operation to occur.

現時点では、この仕様に特有な［ ~privacyの懸念／~securityの懸念］についての情報は無い。 ◎ At this point there are no information about potential privacy or security concerns specific to this specification.

変更点

`2019 年 2 月 14 日勧告候補＠~TR/2019/CR-css-transforms-1-20190214/$ からの変更点 ◎ Since the 14 February 2019 Candidate Recommendation: `transform$a 属性の構文を［ `transform-list$t を成す各~itemの合間には，~commaを要求しない］よう緩めた。 ◎ Relax syntax of transform attribute: Do not require commas between <transform-list> items.; 一部の変形-関数の文法を単純~化した（規範的な影響iは無い）。 ◎ Simplified grammar of transform functions. (No normative impact.); `animate$e, `set$e 要素による変形~animation【すなわち SMIL】の~supportを除去した。 ◎ Remove animation support of transform from animate and set elements.; 変形は，~canvasへ伝播される背景を変形しないことを言明した。背景の伝播に関する他の相互作用を明確化した。 ◎ State that transforms do not transform backgrounds that are propagated to the canvas, and clarify some other interactions with background propagation.; 編集上の変更。 ◎ Editorial changes.
`2018 年 11 月 30 日作業草案＠~TR/2018/WD-css-transforms-1-20181130/$ からの変更点 ◎ Since the 30 November 2018 Working Draft: ~~実質的な変更は無い。 ◎ No substantive changes ◎ Boilerplate, styling updates for CR
`2017 年 11 月 30 日作業草案＠~TR/2017/WD-css-transforms-1-20171130/$ からの変更点 ◎ Since the 30 November 2017 Working Draft: 呈示~属性［ `patternTransform$a, `gradientTransform$a ］は `transform$p ~propを表現するものと指定していた~textを除去した。それは、 `SVG2$r にて指定されることになる。 ◎ Remove specification text that makes patternTransform, gradientTransform presentation attributes representing the transform property. That is going to get specified by SVG 2 [SVG2].; `§ ~privacy／~securityの考慮点＠#priv-sec$ を追加した。 ◎ Added privacy and security section.; `変形-可能$な要素~用に `SVG2$r の定義を利用するようにした。 ◎ Use [SVG2] definitions for transformable elements.; 次に挙げる属性~用に特別な構文を追加した ⇒＃ `transform$a, `patternTransform$a, `gradientTransform$a ◎ Added special syntax for transform, gradientTransform and patternTransform attributes.; ［ `右から乗算-$／`左から乗算-$ ］を利用して乗算~順序を明確化した。 ◎ Clarify multiplication order by using terms post-multiply and pre-multiply.; 疑似-~codeにおける行列~~成分の~index順序を明確化した。 ◎ Clarify index order of matrix entries in pseudo-code.; 行列を組成し直す疑似-~codeにおける乗算~順序を明確化した。 ◎ Clarify multiplication order in recomposition pseudo-code.; ~overflow区画に対する `transform$p の挙動を明確化した。 ◎ Clarify behavior of transform on overflow area.; 単位元たちが成す~listから次に挙げるものを除去した ⇒＃ `translateX(0)^v, `translateY(0)^v, `scaleX(0)^v, `scaleY(0)^v ◎ Remove translateX(0), translateY(0), scaleX(0), scaleY(0) from the list of neutral elements.; 変形-関数~定義から~3D変形nへの参照を除去した。 ◎ Remove any reference of 3D transformations of transform function definitions.; `transform-list$t どうしの補間は、両~listの長さを揃えた上で，［両~listの頭部が共通なときには，行列どうしの補間を避ける］ように指定した。 ◎ Specify interpolation between <transform-list>s to match lengths and avoid matrix interpolation for the common prefix of the two lists.; 次に挙げるものは`変形-可能$でないものとした ⇒＃ `置換され$ない行内~box, `table-column^v ~box, `table-column-group^v ~box ◎ No transform on non-replaced inline boxes, table-column boxes, and table-column-group boxes.; 次に挙げる要素~上の~target座標~空間を定義した ⇒＃ `pattern$e, `linearGradient$e, `radialGradient$e, `clipPath$e ◎ Define target coordinate space for transformations on pattern, linearGradient, radialGradient and clipPath elements.; 変形-関数~primitiveから 3 個の引数をとる `rotate$f を除去した。 ◎ Remove 3-value <rotate()> from transform function primitives.; `変形n行列$と`現在の変形n行列$の算出について，より特定に与えた。 ◎ Be more specific about computation of transformation matrix and current transformation matrix.; `塗り~server要素$ ／ `clipPath$e 要素］用の基準~boxを定義した。 ◎ Define reference box for paint servers and clipPath element.; `transform$a 呈示~属性が遷移の［ `開始~値$ ／ `終止~値$ ］として 3 個の引数をとる `rotate$f を伴う場合の挙動を指定した。 ◎ Specify behavior of transform presentation attribute with 3-value-rotate as start or end value of a transition.; `transform-box$p に `stroke-box^v, `content-box^v を追加した。 ~boxを対応付ける挙動が，すべての仕様にわたり揃うようにした。 ◎ Add stroke-box and content-box to transform-box. Align box mapping behavior across all specifications.; 編集上の変更。 ◎ Editorial changes.

謝辞

注意深い考査, ~comment, 訂正を寄せられた次の方々に。

The editors would like to thank Robert O’Callahan, Cameron McCormack, Tab Atkins, Gérard Talbot, L. David Baron, Rik Cabanier, Brian Birtles, Benoit Jacob, Ken Shoemake, Alan Gresley, Maciej Stochowiak, Sylvain Galineau, Rafal Pietrak, Shane Stephens, Matt Rakow, XiangHongAi, Fabio M. Costa, Nivesh Rajbhandari, Rebecca Hauck, Gregg Tavares, Graham Clift, Erik Dahlström, Alexander Zolotov, Amelia Bellamy-Royds and Boris Zbarsky for their careful reviews, comments, and corrections.

◎要約

CSS Transform （変形, 座標系変換）は、要素が~2D（二次元）空間~内で変形されるように，~CSSで~styleできるようにする。この仕様は、 `CSS 2D Transforms＠~TR/2009/WD-css3-2d-transforms-20090320/$cite, `SVG transforms＠~TR/2009/WD-SVG-Transforms-20090320/$cite 仕様の収束である。 ◎ CSS transforms allows elements styled with CSS to be transformed in two-dimensional space. This specification is the convergence of the CSS 2D Transforms and SVG transforms specifications.

【以下、 “二次元（ `two-dimensional^en ）” ／ “2D” を一律に “~2D” と~~表記する。】

~CSSisaLANG