Transform lists get no longer premultiplied for certain transform functions.

dirkschulze · dirkschulze · commit b2000b42e325 · 2012-07-26T21:41:09.000-07:00
diff --git a/css3-transforms/ChangeLog b/css3-transforms/ChangeLog
@@ -1,3 +1,11 @@
+2012-07-26 dschulze@adobe.com
+    Transform lists get no longer premultiplied if some functions in the list
+    are of type 'matrix', 'rotate3d', 'rotateX', 'rotateY', 'rotateZ', 'matrix3d'
+    and ‘perspective’. 
+    Instead 'rotateX', 'rotateY' and 'rotateZ' get interpolated numericaly and
+    'matrix', 'rotate3d' and ‘perspective’ get converted to matrix4x4 and
+    interpolated as matrices. 
+
 2012-07-20 dschulze@adobe.com
     Changed behavior for transforms on patterns, gradients and other resources.
     The user space for transformations does not depend on the ‘patternUnit’,
diff --git a/css3-transforms/Overview.html b/css3-transforms/Overview.html
@@ -39,14 +39,14 @@
 
    <h1>CSS Transforms</h1>
 
-   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 20 July 2012</h2>
+   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 27 July 2012</h2>
 
    <dl>
     <dt>This version:
 
     <dd> <a
-     href="http://www.w3.org/TR/2012/ED-css3-transforms-20120720/">http://dev.w3.org/csswg/css3-transforms/</a>
-     <!--http://www.w3.org/TR/2012/WD-css3-transforms-20120720/-->
+     href="http://www.w3.org/TR/2012/ED-css3-transforms-20120727/">http://dev.w3.org/csswg/css3-transforms/</a>
+     <!--http://www.w3.org/TR/2012/WD-css3-transforms-20120727/-->
 
     <dt>Latest version:
 
@@ -1987,8 +1987,8 @@ <h3 id=svg-transform-functions><span class=secno>13.4. </span> SVG
     that amount (using the current transformation matrix) for the duration of
     the rotate operation. For example ‘<code class=css>rotate(90deg, 100px,
     100px)</code>’ would cause elements to appear rotated one-quarter of a
-    turn in the clockwise direction after a translation of 100 pixel in the
-    vertical and horizontal direction.
+    turn in the clockwise direction after a translation of the
+    transform-origin of 100 pixel in the horizontal and vertical directions.
   </dl>
 
   <p> User agents are just required to support the two optional arguments for
@@ -2691,7 +2691,7 @@ <h2 id=transform-primitives><span class=secno>18. </span> Transform
    two-dimensional and three-dimensional transform functions are listed
    below.
 
-  <p> Two-dimensional primitives and derived transform functions are:
+  <p> Two-dimensional primitives with derived transform functions are:
 
   <dl>
    <dt id=translate-primitive> <code
@@ -2709,28 +2709,15 @@ <h2 id=transform-primitives><span class=secno>18. </span> Transform
     href="#svg-transform-functions">rotate with three arguments</a> is
     supported.
 
-   <dt id=translate-primitive> <code class=css>rotate(&lt;angle&gt;)</code>
-
-   <dd> if <a href="#svg-transform-functions">rotate with three arguments</a>
-    is not supported.
-
    <dt id=scale-primitive> <code class=css>scale(&lt;number&gt;,
     &lt;number&gt;)</code>
 
    <dd> for <code class=css>scaleX(&lt;number&gt;)</code>, <code
     class=css>scaleY(&lt;number&gt;)</code> and <code
     class=css>scale(&lt;number&gt;)</code>.
-
-   <dt id=skewX-primitive> <code class=css>skewX(&lt;angle&gt;)</code>
-
-   <dd>
-
-   <dt id=skewY-primitive> <code class=css>skewY(&lt;angle&gt;)</code>
-
-   <dd>
   </dl>
 
-  <p> Three-dimensional primitives and derived transform functions are:
+  <p> Three-dimensional primitives with derived transform functions are:
 
   <dl>
    <dt id=translate3d-primitive> <code
@@ -2749,44 +2736,23 @@ <h2 id=transform-primitives><span class=secno>18. </span> Transform
    <dd> for <code class=css>scaleX(&lt;number&gt;)</code>, <code
     class=css>scaleY(&lt;number&gt;)</code>, <code
     class=css>scaleZ(&lt;number&gt;)</code> and <code
-    class=css>scale(&lt;number&gt;[, &lt;number&gt;])</code>.</dd>
-   <!--  The following possible primitives would need a decomposing according to
-                    the current text in "Transitions and Animations between Transform Values".
-                    Therefore I would not define them as primitives. -->
-   <!--
-                <dt id="rotate3d-primitive">
-                  <code class="css">rotate3d(&lt;number&gt;, &lt;number&gt;, &lt;angle&gt;)</code>
-                </dt>
-                <dd>
-                  for <code class="css">rotate(&lt;angle&gt;)</code> (excluding rotate with three
-                  arguments), <code class="css">rotateX(&lt;angle&gt;)</code>, <code 
-                  class="css">rotateY(&lt;angle&gt;)</code> and <code
-                  class="css">rotateZ(&lt;angle&gt;)</code>.
-                </dd>
-                <dt id="matrix3d-primitive">
-                  <code class="css">matrix3d(&lt;number&gt;, &lt;number&gt;, &lt;number&gt;,
-                  &lt;number&gt;, &lt;number&gt;, &lt;number&gt;, &lt;number&gt;, &lt;number&gt;,
-                  &lt;number&gt;, &lt;number&gt;, &lt;number&gt;, &lt;number&gt;, &lt;number&gt;,
-                  &lt;number&gt;, &lt;number&gt;, &lt;number&gt;)</code>
-                </dt>
-                <dd>
-                  for <code class="css">matrix(&lt;number&gt;, &lt;number&gt;, &lt;number&gt;,
-                  &lt;number&gt;, &lt;number&gt;, &lt;number&gt;).
-                </dd>
-                <dt id="perspective-primitive">
-                  <code class="css">perspective(&lt;length&gt;)</code>
-                </dt>
-                <dd>
-                </dd>
-              -->
+    class=css>scale(&lt;number&gt;[, &lt;number&gt;])</code>.
   </dl>
 
-  <p id=primitive-on-its-own> Every primitive listed above is a derivative on
-   its own. E.g <code class=css>translate(&lt;translation-value&gt;,
-   &lt;translation-value&gt;)</code> can be interpolated with every other
-   transform function that has <code
+  <p id=primitive-on-its-own> Every transform function is a derivative on its
+   own. E.g <code class=css>translate(&lt;translation-value&gt;,
+   &lt;translation-value&gt;)</code> of one transform list and <code
    class=css>translate(&lt;translation-value&gt;,
-   &lt;translation-value&gt;)</code> as primitive.
+   &lt;translation-value&gt;)</code> of another transform list can be
+   interpolated with ‘<code class=css>translate</code>’ as primitive.
+
+  <p> The following transform functions are primitives without further
+   derivates: ‘<code class=css>skewX</code>’, ‘<code
+   class=css>skewY</code>’, ‘<code class=css>matrix</code>’, ‘<code
+   class=css>rotateX</code>’, ‘<code class=css>rotateY</code>’,
+   ‘<code class=css>rotateZ</code>’, ‘<code
+   class=css>rotate3d</code>’, ‘<code class=css>matrix3d</code>’ and
+   ‘<a href="#perspective"><code class=css>perspective</code></a>’.
 
   <p id=interpolation-two-three-dimensional-function> For derived transform
    functions that have a two-dimensional primitive and a three-dimensional
@@ -2804,10 +2770,13 @@ <h2 id=transform-primitives><span class=secno>18. </span> Transform
   <h2 id=interpolation-of-transform-functions><span class=secno>19. </span>
    Interpolation of primitives and derived transform functions</h2>
 
-  <p> Two transform functions of the same type 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.
+  <p> With the exception of ‘<code class=css>matrix</code>’, ‘<code
+   class=css>rotate3d</code>’, ‘<code class=css>matrix3d</code>’ and
+   ‘<a href="#perspective"><code class=css>perspective</code></a>’, two
+   transform functions of the same type 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.
 
   <div class=example>
    <p> The two transform functions ‘<code class=css>translate(0)</code>’
@@ -2879,6 +2848,12 @@ <h2 id=interpolation-of-transform-functions><span class=secno>19. </span>
     100px)</code></code>’ respectively. Then both converted transform
     functions get interpolated numerically.</p>
   </div>
+
+  <p> The transform functions ‘<code class=css>matrix</code>’, ‘<code
+   class=css>rotate3d</code>’, ‘<code class=css>matrix3d</code>’ and
+   ‘<a href="#perspective"><code class=css>perspective</code></a>’ get
+   converted into 4x4 matrices first and interpolated as defined in section
+   <a href="">Interpolation of Matrices</a> afterwards.</p>
   <!-- ======================================================================================================= -->
 
   <h2 id=matrix-interpolation><span class=secno>20. </span> Interpolation of
diff --git a/css3-transforms/Transforms.src.html b/css3-transforms/Transforms.src.html
@@ -192,7 +192,7 @@ <h2 id="definitions">Definitions</h2>
               <p>
                 A transformable element is an element in the HTML namespace
                 which is either a
-				<a href="http://www.w3.org/TR/CSS2/visuren.html#block-level">block-level</a>
+                <a href="http://www.w3.org/TR/CSS2/visuren.html#block-level">block-level</a>
                 or
                 <a href="http://www.w3.org/TR/CSS2/visuren.html#x13">atomic inline-level element</a>,
                 or whose '<code class="property">display</code>' property
@@ -1854,8 +1854,8 @@ <h3 id="svg-transform-functions">
                   is translated by that amount (using the current transformation matrix) for the
                   duration of the rotate operation. For example ''rotate(90deg, 100px, 100px)''
                   would cause elements to appear rotated one-quarter of a turn in the clockwise
-                  direction after a translation of 100 pixel in the vertical and horizontal
-                  direction.
+                  direction after a translation of the transform-origin of 100 pixel in the
+                  horizontal and vertical directions.
                 </dd>
               </dl>
 
@@ -2530,7 +2530,7 @@ <h2 id="transform-primitives">
               </p>
 
               <p>
-                Two-dimensional primitives and derived transform functions are:
+                Two-dimensional primitives with derived transform functions are:
               </p>
 
               <dl>
@@ -2551,13 +2551,6 @@ <h2 id="transform-primitives">
                   for <code class="css">rotate(&lt;angle&gt;)</code> if
                   <a href="#svg-transform-functions">rotate with three arguments</a> is supported.
                 </dd>
-                <dt id="translate-primitive">
-                  <code class="css">rotate(&lt;angle&gt;)</code>
-                </dt>
-                <dd>
-                  if <a href="#svg-transform-functions">rotate with three arguments</a> is not
-                  supported.
-                </dd>
                 <dt id="scale-primitive">
                   <code class="css">scale(&lt;number&gt;, &lt;number&gt;)</code>
                 </dt>
@@ -2566,20 +2559,10 @@ <h2 id="transform-primitives">
                   class="css">scaleY(&lt;number&gt;)</code> and <code 
                   class="css">scale(&lt;number&gt;)</code>.
                 </dd>
-                <dt id="skewX-primitive">
-                  <code class="css">skewX(&lt;angle&gt;)</code>
-                </dt>
-                <dd>
-                </dd>
-                <dt id="skewY-primitive">
-                  <code class="css">skewY(&lt;angle&gt;)</code>
-                </dt>
-                <dd>
-                </dd>
               </dl>
 
               <p>
-                Three-dimensional primitives and derived transform functions are:
+                Three-dimensional primitives with derived transform functions are:
               </p>
 
               <dl>
@@ -2603,44 +2586,20 @@ <h2 id="transform-primitives">
                   class="css">scaleZ(&lt;number&gt;)</code> and <code
                   class="css">scale(&lt;number&gt;[, &lt;number&gt;])</code>.
                 </dd>
-
-              <!--  The following possible primitives would need a decomposing according to
-                    the current text in "Transitions and Animations between Transform Values".
-                    Therefore I would not define them as primitives. -->
-              <!--
-                <dt id="rotate3d-primitive">
-                  <code class="css">rotate3d(&lt;number&gt;, &lt;number&gt;, &lt;angle&gt;)</code>
-                </dt>
-                <dd>
-                  for <code class="css">rotate(&lt;angle&gt;)</code> (excluding rotate with three
-                  arguments), <code class="css">rotateX(&lt;angle&gt;)</code>, <code 
-                  class="css">rotateY(&lt;angle&gt;)</code> and <code
-                  class="css">rotateZ(&lt;angle&gt;)</code>.
-                </dd>
-                <dt id="matrix3d-primitive">
-                  <code class="css">matrix3d(&lt;number&gt;, &lt;number&gt;, &lt;number&gt;,
-                  &lt;number&gt;, &lt;number&gt;, &lt;number&gt;, &lt;number&gt;, &lt;number&gt;,
-                  &lt;number&gt;, &lt;number&gt;, &lt;number&gt;, &lt;number&gt;, &lt;number&gt;,
-                  &lt;number&gt;, &lt;number&gt;, &lt;number&gt;)</code>
-                </dt>
-                <dd>
-                  for <code class="css">matrix(&lt;number&gt;, &lt;number&gt;, &lt;number&gt;,
-                  &lt;number&gt;, &lt;number&gt;, &lt;number&gt;).
-                </dd>
-                <dt id="perspective-primitive">
-                  <code class="css">perspective(&lt;length&gt;)</code>
-                </dt>
-                <dd>
-                </dd>
-              -->
               </dl>
 
               <p id="primitive-on-its-own">
-                Every primitive listed above is a derivative on its own. E.g <code
+                Every transform function is a derivative on its own. E.g <code
                 class="css">translate(&lt;translation-value&gt;, &lt;translation-value&gt;)</code>
-                can be interpolated with every other transform function that has <code
+                of one transform list and <code
                 class="css">translate(&lt;translation-value&gt;, &lt;translation-value&gt;)</code>
-                as primitive.
+                of another transform list can be interpolated with ''translate'' as primitive.
+              </p>
+
+              <p>
+                The following transform functions are primitives without further derivates:
+                ''skewX'', ''skewY'', ''matrix'', ''rotateX'', ''rotateY'', ''rotateZ'',
+                ''rotate3d'', ''matrix3d'' and ''perspective''.
               </p>
 
               <p id="interpolation-two-three-dimensional-function">
@@ -2664,7 +2623,8 @@ <h2 id="interpolation-of-transform-functions">
               </h2>
               
               <p>
-                Two transform functions of the same type and the same number of arguments are
+                With the exception of ''matrix'', ''rotate3d'', ''matrix3d'' and ''perspective'',
+                two transform functions of the same type 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.
               </p>
@@ -2745,6 +2705,12 @@ <h2 id="interpolation-of-transform-functions">
                 </p>
               </div>
 
+              <p>
+                The transform functions ''matrix'', ''rotate3d'', ''matrix3d'' and ''perspective''
+                get converted into 4x4 matrices first and interpolated as defined in section <a
+                href="">Interpolation of Matrices</a> afterwards.
+              </p>
+
               <!-- ======================================================================================================= -->
 
               <h2 id="matrix-interpolation">
