Add note about side effects on converting transform functions to matrix.

Author: dirkschulze

css3-transforms/ChangeLog

@@ -1,3 +1,6 @@
+2012-05-26 dschulze@adobe.com
+    Add note about side effects on converting transform functions to matrix. 
+
 2012-05-28 ayg@aryeh.name
     Define how exactly to apply perspective (w-parameter)
     Fixes https://www.w3.org/Bugs/Public/show_bug.cgi?id=15605

css3-transforms/Overview.html

@@ -2233,7 +2233,7 @@ <h3 id=svg-animate-element><span class=secno>14.1. </span> Elements,
 
    <tbody>
     <tr>
-     <td><var>&lt;transform-list&gt;</var>
+     <th><var>&lt;transform-list&gt;</var>
 
      <td>yes
 
@@ -2245,11 +2245,12 @@ <h3 id=svg-animate-element><span class=secno>14.1. </span> Elements,
 
      <td>yes
 
-     <td>Additive means that a transformation is post-multiplied to the base
-      set of transformations.
+     <td>Additive for ‘<code class=property>animateTransform</code>’
+      means that a transformation is post-multiplied to the base set of
+      transformations.
 
     <tr>
-     <td><var>&lt;translation-value&gt;</var>
+     <th><var>&lt;translation-value&gt;</var>
 
      <td>yes
 
@@ -2863,6 +2864,43 @@ <h2 id=matrix-interpolation><span class=secno>20. </span> Interpolation of
    numerically</a> and <a href=matrix-recomposing>recomposed back to a
    matrix</a> in a final step.
 
+  <div class=note>
+   <p> In the following example the element gets translated by 100 pixel in
+    both the X and Y directions and rotated by 1170 degree on hovering. The
+    initial transformation is 45 degree. With the usage of transition, an
+    author might expect a animated, clockwise rotation by three and a quarter
+    turn (1170 degree).</p>
+
+   <pre>
+&lt;style&gt;
+div {
+    transform: rotate(45deg);
+}
+div:hover {
+    transform: translate(100px, 100px) rotate(1215deg);
+    transition: transform 3s;
+}
+&lt;/style&gt;
+
+&lt;div&gt;&lt;/div&gt;</pre>
+
+   <p> The number of transform functions on the source transform ‘<code
+    class=css>rotate(45deg)</code>’ differs from the number of transform
+    functions on the destination transform ‘<code
+    class=css>translate(100px, 100px) rotate(1125deg)</code>’. According to
+    the last rule of <a href="#animation">Interpolation of Transforms</a>,
+    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 degree).</p>
+
+   <p> To achieve the three and a quarter turns for the example above, source
+    and destination transforms must fulfill the third rule of <a
+    href="#animation">Interpolation of Transforms</a>. Source transform could
+    look like ‘<code class=css>translate(0, 0) rotate(45deg)</code>’ for
+    a linearly interpolation of the transform functions.</p>
+  </div>
+
   <h3 id=matrix-decomposing><span class=secno>20.1. </span>Decomposing the
    Matrix</h3>
 

css3-transforms/Transforms.src.html

@@ -2058,17 +2058,17 @@ <h3 id="svg-animate-element">
                 </thead>
                 <tbody>
                   <tr>
-                    <td><var>&lt;transform-list&gt;</var></td>
+                    <th><var>&lt;transform-list&gt;</var></th>
                     <td>yes</td>
                     <td>yes</td>
                     <td>yes</td>
                     <td>no</td>
                     <td>yes</td>
-                    <td>Additive means that a transformation is post-multiplied to the base set of
+                    <td>Additive for 'animateTransform' means that a transformation is post-multiplied to the base set of
                       transformations.</td>
                   </tr>
                   <tr>
-                    <td><var>&lt;translation-value&gt;</var></td>
+                    <th><var>&lt;translation-value&gt;</var></th>
                     <td>yes</td>
                     <td>yes</td>
                     <td>yes</td>
@@ -2703,6 +2703,47 @@ <h2 id="matrix-interpolation">
                 href="matrix-recomposing">recomposed back to a matrix</a> in a final step.
               </p>
 
+              <div class="note">
+                <p>
+                  In the following example the element gets translated by 100 pixel in both the X
+                  and Y directions and rotated by 1170 degree on hovering. The initial
+                  transformation is 45 degree. With the usage of transition, an author might expect
+                  a animated, clockwise rotation by three and a quarter turn (1170 degree).
+                </p>
+
+                <pre>
+&lt;style&gt;
+div {
+    transform: rotate(45deg);
+}
+div:hover {
+    transform: translate(100px, 100px) rotate(1215deg);
+    transition: transform 3s;
+}
+&lt;/style&gt;
+
+&lt;div&gt;&lt;/div&gt;</pre>
+
+                <p>
+                  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 <a href="#animation">Interpolation of
+                  Transforms</a>, 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
+                  degree).
+                </p>
+
+                <p>
+                  To achieve the three and a quarter turns for the example above, source and
+                  destination transforms must fulfill the third rule of <a
+                  href="#animation">Interpolation of Transforms</a>. Source transform could look
+                  like ''translate(0, 0) rotate(45deg)'' for a linearly interpolation of 
+                  the transform functions.
+                </p>
+              </div>
+
               <h3 id="matrix-decomposing">Decomposing the Matrix</h3>
 
               <p>