[css-transforms-2] Convert math from images to MathJax.

Author: dbaron

css-transforms-2/Overview.bs

@@ -47,6 +47,19 @@ spec: filter-effects-1; type:property; text:filter;
 spec: html; type: element; text: a;
 </pre>
 
+<script>
+window.MathJax = {
+  tex: {
+    inlineMath: [['$', '$']]
+    displayMath: [['$$', '$$']]
+  },
+  svg: {
+    fontCache: 'global'
+  }
+};
+</script>
+<script src="mathjax/es5/tex-svg.js"></script>
+
 Introduction {#intro}
 =====================
 
@@ -148,8 +161,7 @@ Two Dimensional Subset {#two-dimensional-subset}
 UAs may not always be able to render three-dimensional transforms and then just support a two-dimensional subset of this specification. In this case <a href="#three-d-transform-functions">three-dimensional transforms</a> and the properties 'transform-style', 'perspective', 'perspective-origin' and 'backface-visibility' must not be supported. Section <a href="#3d-transform-rendering">3D Transform Rendering</a> does not apply. Matrix decomposing uses the technique taken from the "unmatrix" method in "Graphics Gems II, edited by Jim Arvo", simplified for the 2D case. Section <a href="#mathematical-description">Mathematical Description of Transform Functions</a> is still effective but can be reduced by using a 3x3 transformation matrix where <em>a</em> equals m<sub>11</sub>, <em>b</em> equals m<sub>12</sub>, <em>c</em> equals m<sub>21</sub>, <em>d</em> equals m<sub>22</sub>, <em>e</em> equals m<sub>41</sub> and <em>f</em> equals m<sub>42</sub> (see A 2D 3x2 matrix with six parameter).
 
 <div class="figure">
-	<img src="images/3x3matrix.png" alt="3x3 matrix" title="\begin{bmatrix} a & c & e \\ b
-	& d & f \\ 0 & 0 & 1 \end{bmatrix}" width="82" height="79">
+	$$\begin{bmatrix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{bmatrix}$$
 	 <p class="caption">
 		 3x3 matrix for two-dimensional transformations.
 
@@ -1310,29 +1322,30 @@ Mathematical Description of Transform Functions {#mathematical-description}
 
 Mathematically, all transform functions can be represented as 4x4 transformation matrices of the following form:
 
-<img src="images/4x4matrix.png" alt="\begin{bmatrix} m11 & m21 & m31 & m41 \\ m12 & m22 & m32 & m42 \\ m13 & m23 & m33 & m43 \\ m14 & m24 & m34 & m44 \end{bmatrix}" width="222" height="106">
+$$\begin{bmatrix} m11 & m21 & m31 & m41 \\ m12 & m22 & m32 & m42 \\ m13 & m23 & m33 & m43 \\ m14 & m24 & m34 & m44 \end{bmatrix}$$
 
 One translation unit on a matrix is equivalent to 1 pixel in the local coordinate system of the element.
 
 <ul>
 	<li id="Translate3dDefined">
 			A 3D translation with the parameters <em>tx</em>, <em>ty</em> and <em>tz</em> is equivalent to the matrix:
 
-		<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">
+		$$\begin{bmatrix} 1 & 0 & 0 & tx \\ 0 & 1 & 0 & ty \\ 0 & 0 & 1 & tz \\ 0 & 0 & 0 & 1 \end{bmatrix}$$
 
 	<li id="Scale3dDefined">
 			A 3D scaling with the parameters <em>sx</em>, <em>sy</em> and <em>sz</em> is equivalent to the matrix:
 
-		<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">
+		$$\begin{bmatrix} sx & 0 & 0 & 0 \\ 0 & sy & 0 & 0 \\ 0 & 0 & sz & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix}$$
 
 	<li id="Rotate3dDefined">
 			A 3D rotation with the vector [x,y,z] and the parameter <em>alpha</em> is equivalent to the matrix:
 
-		<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">
+		$$\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}$$
 
 			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">
+		$$sc = \sin (\alpha/2) \cdot \cos (\alpha/2)$$
+                $$sq = \sin^2 (\alpha/2)$$
 
                         and where x, y, and z have been normalized
                         (that is,
@@ -1343,7 +1356,7 @@ One translation unit on a matrix is equivalent to 1 pixel in the local coordinat
 	<li id="PerspectiveDefined">
 			A perspective projection matrix with the parameter <em>d</em> is equivalent to the matrix:
 
-		<img src="images/perspective.png" alt="\begin{bmatrix} 1 & 0 & 0 & 0 \\ 0 & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & -1/d & 1 \end{bmatrix}" width="143" height="106">
+		$$\begin{bmatrix} 1 & 0 & 0 & 0 \\ 0 & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & -1/d & 1 \end{bmatrix}$$
 
 </ul>