[css-transforms-1] Re-add math forumlas for translate, scale and rotate. #4077

Author: dirkschulze

css-transforms-1/Overview.bs

@@ -1479,23 +1479,26 @@ One translation unit on a matrix is equivalent to 1 pixel in the local coordinat
 
   <li id="TranslateDefined">
     <p>
-    <!-- FIXME -->
       A 2D translation with the parameters <em>tx</em> and <em>ty</em> is equivalent to a 3D translation where <em>tz</em> has zero as a value.
 
+      <img src="images/translate3d.png" alt="\begin{bmatrix} 1 & 0 & 0 & tx \\ 0 & 1 & 0 & ty \\ 0 & 0 & 1 & tz \\ 0 & 0 & 0 & 1 \end{bmatrix}" width="114" height="106">
 
   <li id="ScaleDefined">
     <p>
-    <!-- FIXME -->
       A 2D scaling with the parameters <em>sx</em> and <em>sy</em> is equivalent to a 3D scale where <em>sz</em> has one as a value.
 
+      <img src="images/scale3d.png" alt="\begin{bmatrix} sx & 0 & 0 & 0 \\ 0 & sy & 0 & 0 \\ 0 & 0 & sz & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix}" width="137" height="106">
 
   <li id="RotateDefined">
     <p>
-    <!-- FIXME -->
       A 2D rotation with the parameter <em>alpha</em> is
-      equivalent to a 3D rotation
-      with vector [0,0,1] and parameter <em>alpha</em>.
+      equivalent to a 3D rotation with the vector [x,y,z] where <em>x</em> has zero as a value, <em>y</em> has zero as a value, <em>z</em> has one as a value, and the parameter <em>alpha</em>.
 
+      <img src="images/rotate3dmatrix.png" alt="\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}" width="647" height="106">
+
+			where:
+
+      <img src="images/rotate3dvariables.png" alt="\newline sc = \sin (\alpha/2) \cdot \cos (\alpha/2) \newline sq = \sin^2 (\alpha/2)" width="221" height="50">
 
   <li id="SkewDefined">
     <p>