[css-transforms-2] Copy the rest of the section "Interpolation of primitives and derived transform functions" from css-transforms-1.

Author: dbaron

css-transforms-2/Overview.bs

@@ -1267,6 +1267,55 @@ The transform functions <<matrix()>>, ''matrix3d()'' and ''perspective()'' get c
 
 For interpolations with the primitive ''rotate3d()'', the direction vectors of the transform functions get normalized first. If the normalized vectors are not equal and both rotation angles are non-zero the transform functions get converted into 4x4 matrices first and interpolated as defined in section <a href="#matrix-interpolation">Interpolation of Matrices</a> afterwards. Otherwise the rotation angle gets interpolated numerically and the rotation vector of the non-zero angle is used or (0, 0, 1) if both angles are zero.
 
+<div class="example">
+
+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.
+
+</div>
+
+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 class="example">
+
+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.
+
+  <pre><code highlight=css>
+  div {
+    transform: translateX(100px);
+  }
+
+  div:hover {
+    transform: translateY(100px);
+    transition: transform 3s;
+  }
+  </code></pre>
+
+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.
+</div>
+
+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 class="example">
+
+In this example a two-dimensional transform function gets animated to a three-dimensional transform function. The common primitive is ''translate3d()''.
+
+  <pre><code highlight=css>
+  div {
+    transform: translateX(100px);
+  }
+
+  div:hover {
+    transform: translateZ(100px);
+    transition: transform 3s;
+  }
+  </code></pre>
+
+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.
+
+</div>
+
+
 Addition and accumulation of transform lists {#combining-transform-lists}
 ============================================