[css-tranforms-2] Add a more formal definition of flattening.

This will eventually fix w3c#6207 once it's fully reviewed.

Author: dbaron

css-transforms-2/Overview.bs

@@ -331,7 +331,7 @@ The rendering of elements in a 3D rendering context is as follows (numbers refer
 	<li>The content and descendant elements without 3D transforms, ordered according to steps 3—7, are rendered into a plane at z=0 relative to the establishing element.
 	<li>3D-transformed elements are each rendered into their own plane, transformed by the <a href="#accumulated-3d-transformation-matrix-computation">accumulated 3D transformation matrix</a>.
 	<li>Intersection is performed between the set of planes generated by steps B and C, according to <a href="http://en.wikipedia.org/wiki/Newell%27s_algorithm">Newell's algorithm</a>.
-	<li>The resulting set of planes is rendered on top of the backgrounds and box decorations rendered in this step A. Coplanar [=3D transformed elements=] are rendered in painting order.
+	<li>The resulting set of planes is <a>flattened</a> and rendered on top of the backgrounds and box decorations rendered in this step A. Coplanar [=3D transformed elements=] are rendered in painting order.
 </ol>
 
 Issue: is it OK to not pop 2D-transformed elements into their own planes?
@@ -423,7 +423,7 @@ This example shows how nested 3D transforms are rendered. The blue div is transf
 
 ### Transformed element hierarchies ### {#transformed-element-hierarchies}
 
-By default, <a>transformed elements</a> do not create a <a>3D rendering context</a> and create a flattened representation of their content. However, since it is useful to construct hierarchies of transformed objects that share a common 3-dimensional space, this flattening behavior may be overridden by specifying a value of ''transform-style/preserve-3d'' for the ''transform-style'' property. This allows descendants of the transformed element to share the same 3D rendering context. Non-3D-transformed descendants of such elements are rendered into the plane of the element in step C above, but 3D-transformed elements in the same 3D rendering context will "pop out" into their own planes.
+By default, <a>transformed elements</a> do not create a <a>3D rendering context</a> and create a <a>flattened</a> representation of their content. However, since it is useful to construct hierarchies of transformed objects that share a common 3-dimensional space, this flattening behavior may be overridden by specifying a value of ''transform-style/preserve-3d'' for the ''transform-style'' property. This allows descendants of the transformed element to share the same 3D rendering context. Non-3D-transformed descendants of such elements are rendered into the plane of the element in step C above, but 3D-transformed elements in the same 3D rendering context will "pop out" into their own planes.
 
 <div class="example">
 	<pre>
@@ -1360,6 +1360,28 @@ One translation unit on a matrix is equivalent to 1 pixel in the local coordinat
 
 </ul>
 
+Mathematical Description of Flattening {#mathematical-flattening}
+======================================
+
+Transformations, whether a
+<a href="#mathematical-description">transform function</a>,
+<a>transformation matrix</a>,
+<a>perspective matrix</a>, or
+<a>accumulated 3D transformation matrix</a>, are
+represented by a 4x4 matrix:
+$$\begin{bmatrix} m11 & m21 & m31 & m41 \\ m12 & m22 & m32 & m42 \\ m13 & m23 & m33 & m43 \\ m14 & m24 & m34 & m44 \end{bmatrix}$$
+
+<dfn lt="flatten">Flattening</dfn> this matrix means changing it into:
+$$\begin{bmatrix} m11 & m21 & 0 & m41 \\ m12 & m22 & 0 & m42 \\ 0 & 0 & 1 & 0 \\ m14 & m24 & 0 & m44 \end{bmatrix}$$
+
+Note: Flattening can change whether a matrix is invertible.
+For example, the matrix produced by ''rotateX(90deg)'' is invertible,
+but when flattened it is not invertible because it maps all points to $y=0$.
+Or, for an example the other way around,
+the matrix produced by ''scaleZ(0)'' is not invertible
+since it maps all points to $z=0$,
+but when flattened it becomes invertible.
+
 The SVG 'transform' Attribute {#svg-transform}
 =============================