[css-transforms] Move images into an images folder.

Author: smfr

css-transforms/ChangeLog

@@ -1,3 +1,6 @@
+2015-7-15 Simon Fraser <simon.fraser@apple.com>
+    Move images into an images folder.
+
 2015-1-29 Simon Fraser <simon.fraser@apple.com>
     Note that transform-style: preserve-3d creates stacking context and containing block.
 

css-transforms/Overview.html

@@ -192,7 +192,7 @@ <h2 id="two-dimensional-subset">Two Dimensional Subset</h2>
 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 href="#MatrixDefined">A 2D 3x2 matrix with six parameter</a>).
 
 <div class="figure">
-  <img src="3x3matrix.png" alt="3x3 matrix" title="\begin{bmatrix} a & c & e \\ b
+  <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">
    <p class="caption">
      3x3 matrix for two-dimensional transformations.
@@ -232,7 +232,7 @@ <h2 id="transform-rendering">The Transform Rendering Model</h2>
 The coordinate space is a coordinate system with two axes: the X axis increases horizontally to the right; the Y axis increases vertically downwards. Three-dimensional transform functions extend this coordinate space into three dimensions, adding a Z axis perpendicular to the plane of the screen, that increases towards the viewer.
 
 <div class="figure">
-  <img src="coordinates.svg" width="270" height="240" alt="Demonstration of the initial coordinate space">
+  <img src="images/coordinates.svg" width="270" height="240" alt="Demonstration of the initial coordinate space">
   <p class="caption">
      Demonstration of the initial coordinate space.
   </p>
@@ -354,7 +354,7 @@ <h4 id="perspective">Perspective</h4>
 The 'perspective' and 'perspective-origin' properties can be used to add a feeling of depth to a scene by making elements higher on the Z axis (closer to the viewer) appear larger, and those further away to appear smaller. The scaling is proportional to <var>d</var>/(<var>d</var> &minus; <var>Z</var>) where <var>d</var>, the value of 'perspective', is the distance from the drawing plane to the the assumed position of the viewer's eye.
 
 <div class="figure">
-  <img alt="Diagram of scale vs. Z position" src="perspective_distance.png">
+  <img alt="Diagram of scale vs. Z position" src="images/perspective_distance.png">
   <p class="caption">
     Diagrams showing how scaling depends on the 'perspective' property and Z position. In the top diagram, <var>Z</var> is half of <var>d</var>. In order to make it appear that the original circle (solid outline) appears at <var>Z</var> (dashed circle), the circle is scaled up by a factor of two, resulting in the light blue circle. In the bottom diagram, the circle is scaled down by a factor of one-third to make it appear behind the original position.
   </p>
@@ -363,7 +363,7 @@ <h4 id="perspective">Perspective</h4>
 Normally the assumed position of the viewer's eye is centered on a drawing. This position can be moved if desired &ndash; for example, if a web page contains multiple drawings that should share a common perspective &ndash; by setting 'perspective-origin'.
 
 <div class="figure">
-  <img alt="Diagram of different perspective-origin" src="perspective_origin.png">
+  <img alt="Diagram of different perspective-origin" src="images/perspective_origin.png">
   <p class="caption">
     Diagram showing the effect of moving the perspective origin upward.
   </p>
@@ -2372,7 +2372,7 @@ <h2 id="mathematical-description">
 
 Mathematically, all transform functions can be represented as 4x4 transformation matrices of the following form:
 
-<img src="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">
+<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">
 
 One translation unit on a matrix is equivalent to 1 pixel in the local coordinate system of the element.
 
@@ -2381,7 +2381,7 @@ <h2 id="mathematical-description">
     <p>
       A 2D 3x2 matrix with six parameters <em>a</em>, <em>b</em>, <em>c</em>, <em>d</em>, <em>e</em> and <em>f</em> is equivalent to the matrix:
     </p>
-    <img src="matrix.png" alt="\begin{bmatrix} a & c & 0 & e \\ b & d & 0 & f \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix}" width="108" height="106">
+    <img src="images/matrix.png" alt="\begin{bmatrix} a & c & 0 & e \\ b & d & 0 & f \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix}" width="108" height="106">
   </li>
   <li id="TranslateDefined">
     <p>
@@ -2404,47 +2404,47 @@ <h2 id="mathematical-description">
     <p>
       A 2D skew like transformation with the parameters <em>alpha</em> and <em>beta</em> is equivalent to the matrix:
     </p>
-    <img src="skew.png" alt="\begin{bmatrix} 1 & \tan(\alpha) & 0 & 0 \\ \tan(\beta) & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix}" width="205" height="106">
+    <img src="images/skew.png" alt="\begin{bmatrix} 1 & \tan(\alpha) & 0 & 0 \\ \tan(\beta) & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix}" width="205" height="106">
   </li>
   <li id="SkewXDefined">
     <p>
       A 2D skew transformation along the X axis with the parameter <em>alpha</em> is equivalent to the matrix:
     </p>
-    <img src="skewX.png" alt="\begin{bmatrix} 1 & \tan(\alpha) & 0 & 0 \\ 0 & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix}" width="155" height="106">
+    <img src="images/skewX.png" alt="\begin{bmatrix} 1 & \tan(\alpha) & 0 & 0 \\ 0 & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix}" width="155" height="106">
   </li>
   <li id="SkewYDefined">
     <p>
       A 2D skew transformation along the Y axis with the parameter <em>beta</em> is equivalent to the matrix:
     </p>
-    <img src="skewY.png" alt="\begin{bmatrix} 1 & 0 & 0 & 0 \\ \tan(\beta) & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix}" width="155" height="106">
+    <img src="images/skewY.png" alt="\begin{bmatrix} 1 & 0 & 0 & 0 \\ \tan(\beta) & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix}" width="155" height="106">
   </li>
   <li id="Translate3dDefined">
     <p>
       A 3D translation with the parameters <em>tx</em>, <em>ty</em> and <em>tz</em> is equivalent to the matrix:
     </p>
-    <img src="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">
+    <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>
   <li id="Scale3dDefined">
     <p>
       A 3D scaling with the parameters <em>sx</em>, <em>sy</em> and <em>sz</em> is equivalent to the matrix:
     </p>
-    <img src="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">
+    <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>
   <li id="Rotate3dDefined">
     <p>
       A 3D rotation with the vector [x,y,z] and the parameter <em>alpha</em> is equivalent to the matrix:
     </p>
-    <img src="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">
+    <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">
     <p>
       where:
     </p>
-    <img src="rotate3dvariables.png" alt="\newline sc = \sin (\alpha/2) \cdot \cos (\alpha/2) \newline sq = \sin^2 (\alpha/2)" width="221" height="50">
+    <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>
   <li id="PerspectiveDefined">
     <p>
       A perspective projection matrix with the parameter <em>d</em> is equivalent to the matrix:
     </p>
-    <img src="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">
+    <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">
   </li>
 </ul>