[css-transforms-1] Be more precise about multiplication order by using (and referencing) post-multiply/pre-multiply. #909

Author: dirkschulze

css-transforms-1/Overview.bs

@@ -146,9 +146,11 @@ When used in this specification, terms have the meanings assigned in this sectio
     :: A <a href="#transform-functions">transform function</a> that is equivalent to a identity 4x4 matrix (see <a href="#mathematical-description">Mathematical Description of Transform Functions</a>). 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)''.
 
     : <dfn>post-multiply</dfn>
+    : <dfn>post-multiplied</dfn>
     :: Term <var>A</var> post-multiplied by term <var>B</var> is equal to <var>A</var> &middot; <var>B</var>.
 
     : <dfn>pre-multiply</dfn>
+    : <dfn>pre-multiplied</dfn>
     :: Term <var>A</var> pre-multiplied by term <var>B</var> is equal to <var>B</var> &middot; <var>A</var>.
 
     : <dfn>multiply</dfn>
@@ -218,9 +220,9 @@ The 'transform-origin' property moves the point of origin by 50 pixels in both t
 The visual appareance is as if the <a element>div</a> element gets translated by 80px to the bottom left direction, then scaled up by 150% and finally rotated by 45&deg;.
 
 Each <<transform-function>> can get represented by a corresponding 4x4 matrix. To map a point from the coordinate space of the <a element>div</a> box to the coordinate space of the parent element, these transforms get multiplied in the reverse order:
-1. The rotation matrix gets multiplied with the scale matrix.
-2. The result of the previous multiplication is then multiplied with the translation matrix to create the accumulated transformation matrix.
-3. Finally, the point to map gets pre-multiplied with the accumulated transformation matrix.
+1. The rotation matrix gets <a>post-multiplied</a> by the scale matrix.
+2. The result of the previous multiplication is then <a>post-multiplied</a> by the translation matrix to create the accumulated transformation matrix.
+3. Finally, the point to map gets <a>pre-multiplied</a> with the accumulated transformation matrix.
 
 For more details see <a href="#transform-function-lists">The Transform Function Lists</a>.
 
@@ -719,7 +721,7 @@ SVG transform functions of the <a element-attr for>transform</a>, <{pattern/patt
 
 The SVG transform function <a href="#svg-rotate">rotate</a> 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''.
 
-If the value of a <a element-attr for>transform</a> attribute is the start or end value of a CSS Transition and the SVG <a href="svg-transform-list">transform list</a> contains at least one <a href="#svg-rotate">rotate</a> transform function with 3 values, the individual SVG transform functions must get multiplied and the resulting matrix must get mapped to a <<matrix()>> CSS <<transform-function>> and used as start/end value of the CSS Transition.
+If the value of a <a element-attr for>transform</a> attribute is the start or end value of a CSS Transition and the SVG <a href="svg-transform-list">transform list</a> contains at least one <a href="#svg-rotate">rotate</a> transform function with 3 values, the individual SVG transform functions must get <a>post-multiplied</a> and the resulting matrix must get mapped to a <<matrix()>> CSS <<transform-function>> and used as start/end value of the CSS Transition.
 
 Issue(w3c/csswg-drafts#2684): Implementations differ. More testing is required.
 
@@ -778,13 +780,11 @@ The <{animate}> and <{set}> element {#svg-animate-element}
 
 With this specification, the <{animate}> element and the <{set}> element can animate the data type <<transform-list>>.
 
-The animation effect is post-multiplied to the underlying value for additive <{animate}> animations (see below) instead of added to the underlying value, due to the specific behavior of <<transform-list>> animations.
-
-Issue(w3c/csswg-drafts#909): Clarify post-/pre-multiply column-/row-major order.
+The animation effect is <a>post-multiplied</a> to the underlying value for additive <{animate}> animations (see below) instead of added to the underlying value, due to the specific behavior of <<transform-list>> animations.
 
 <var ignore=''>From-to</var>, <var ignore=''>from-by</var> and <var ignore=''>by</var> animations are defined in SMIL to be equivalent to a corresponding <var ignore>values</var> animation. However, <var ignore=''>to</var> animations are a mixture of additive and non-additive behavior [[SMIL3]].
 
-<var ignore=''>To</var> animations on <{animate}> provide specific functionality to get a smooth change from the underlying value to the <var ignore=''>to</var> attribute value, which conflicts mathematically with the requirement for additive transform animations to be post-multiplied. As a consequence, the behavior of <var ignore=''>to</var> animations for <{animate}> is undefined. Authors are suggested to use <var ignore=''>from-to</var>, <var ignore=''>from-by</var>, <var ignore=''>by</var> or <var ignore=''>values</var> animations to achieve any desired transform animation.
+<var ignore=''>To</var> animations on <{animate}> provide specific functionality to get a smooth change from the underlying value to the <var ignore=''>to</var> attribute value, which conflicts mathematically with the requirement for additive transform animations to be <a>post-multiplied</a>. As a consequence, the behavior of <var ignore=''>to</var> animations for <{animate}> is undefined. Authors are suggested to use <var ignore=''>from-to</var>, <var ignore=''>from-by</var>, <var ignore=''>by</var> or <var ignore=''>values</var> animations to achieve any desired transform animation.
 
 The value "paced" is undefined for the attribute <{animate/calcMode}> on <{animate}> for animations of the data type <<transform-list>>. If specified, UAs may choose the value "linear" instead. Future versions of this specification may define how paced animations can be performed on <<transform-list>>.
 
@@ -815,9 +815,7 @@ With this specification the SVG basic data type <<transform-list>> is equivalent
       <td>yes
       <td>no
       <td>yes
-      <td>Additive for <{animateTransform}> means that a transformation is post-multiplied to the base set of
-        transformations.
-
+      <td>Additive for <{animateTransform}> means that a transformation is <a>post-multiplied</a> to the base set of transformations.
   </tbody>
 </table>
 
@@ -1024,7 +1022,7 @@ When animating or transitioning transforms, the transform function lists must be
 
   <li id="other-animation">
     In all other cases:
-		* The transform functions of each transform function list on the <em>from-</em> and <em>to-transform</em> get post multiplied and converted into 4x4 matrices. Each of the matrices gets interpolated following the instructions in <a href="#matrix-interpolation">Interpolation of matrices</a>. The computed value is the transform function ''matrix''.
+		* The transform functions of each transform function list on the <em>from-</em> and <em>to-transform</em> get <a>post-multiplied</a> and converted into 4x4 matrices. Each of the matrices gets interpolated following the instructions in <a href="#matrix-interpolation">Interpolation of matrices</a>. The computed value is the transform function ''matrix''.
 
 </ul>