CSS による変形 — 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.

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:

1. %T ~LET `transform-origin$p の算出d値が与える移動量による`~2D並進$ ◎ Start with the identity matrix. ◎ Translate by the computed X and Y of transform-origin
2. %TM ~SET %T の複製 ◎ ↑
3. `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
4. %TM に %T の逆行列を`右から乗算-$する ◎ Translate by the negated computed X and Y values of transform-origin

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

変形は、 `変形-可能$な要素に適用される。 ◎ 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.

利用者からは、 要素は，実質的に それに適用される局所~変形に加えて，そのすべての先祖の `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 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>

注記： 変形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);
}

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

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 style="transform: translate(80px, 80px)">
  <div style="transform: scale(1.5, 1.5)">
      <div style="transform: rotate(45deg)"></div>
  </div>
</div>

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

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

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

~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.

<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>

<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 以外の算出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+

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$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 属性

<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>

<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>

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.

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.

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

<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.

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

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

11. 変形どうしの補間

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

1. ~IF［ 値A ~EQ `none^v ］~AND［ 値B ~EQ `none^v ］ ⇒ ~RET `none^v ◎ If both Va and Vb are none: • Vresult is none.
2. ~IF［ 値A ~EQ `none^v ］ ⇒ 値A ~SET 空~list ◎ ↓
3. ~IF［ 値B ~EQ `none^v ］ ⇒ 値B ~SET 空~list ◎ Treating none as a list of zero length,

4. ~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).

5. %結果 ~LET 空~list ◎ Let Vresult be an empty list.＼
6. %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:
7. ~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.

8. ~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.
9. ~RET %結果 ◎ ↑

一部の~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 つの変形-関数は、［ 型が異っていても，同じ原始関数から派生している／ 引数の個数が異なっていても，型が同じ ］ならば、 補間できる。 いずれにせよ，両 ~変形-関数は、 まず前節による共通な原始関数への換算を要する — それから，数量的に補間される。 算出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 {
  transform: translateX(100px);
}

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

両~変形-関数が，ある~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.

div {
  transform: translateX(100px);
}

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

13. 行列どうしの補間

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

<div></div>

以下では、［ `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.

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

入力:
   %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

入力:
   %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

入力:
   %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:

【 この仕様における行列は、 座標を~~縦~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.