W3C home > Mailing lists > Public > public-css-commits@w3.org > February 2012

csswg/css3-transforms 4x4matrix.png,NONE,1.1 matrix.png,NONE,1.1 perspective.png,NONE,1.1 rotate3dmatrix.png,NONE,1.1 rotate3dvariables.png,NONE,1.1 rotateX.png,NONE,1.1 rotateY.png,NONE,1.1 rotateZ.png,NONE,1.1 scale3d.png,NONE,1.1 skew.png,NONE,1.1 translate3d.png,NONE,1.1 ChangeLog,1.12,1.13 Makefile,1.1,1.2 Overview.html,1.22,1.23 Transforms.src.html,1.25,1.26

From: Dirk Schulze via cvs-syncmail <cvsmail@w3.org>
Date: Mon, 13 Feb 2012 00:12:28 +0000
To: public-css-commits@w3.org
Message-Id: <E1RwjWu-0004Dq-Jn@lionel-hutz.w3.org>
Update of /sources/public/csswg/css3-transforms
In directory hutz:/tmp/cvs-serv16213

Modified Files:
	ChangeLog Makefile Overview.html Transforms.src.html 
Added Files:
	4x4matrix.png matrix.png perspective.png rotate3dmatrix.png 
	rotate3dvariables.png rotateX.png rotateY.png rotateZ.png 
	scale3d.png skew.png translate3d.png 
Log Message:
2012-02-12 dschulze@adobe.com
    Added section "Mathematical description of transformation functions".
    Link all transformation function descriptions to intern mathematical section instead of SVG.
    Corrected typos.

--- NEW FILE: skew.png ---
(This appears to be a binary file; contents omitted.)

--- NEW FILE: translate3d.png ---
(This appears to be a binary file; contents omitted.)

--- NEW FILE: 4x4matrix.png ---
(This appears to be a binary file; contents omitted.)

--- NEW FILE: rotate3dmatrix.png ---
(This appears to be a binary file; contents omitted.)

--- NEW FILE: rotate3dvariables.png ---
(This appears to be a binary file; contents omitted.)

Index: ChangeLog
===================================================================
RCS file: /sources/public/csswg/css3-transforms/ChangeLog,v
retrieving revision 1.12
retrieving revision 1.13
diff -u -d -r1.12 -r1.13
--- ChangeLog	10 Feb 2012 23:41:03 -0000	1.12
+++ ChangeLog	13 Feb 2012 00:12:25 -0000	1.13
@@ -1,3 +1,8 @@
+2012-02-12 dschulze@adobe.com
+    Added section "Mathematical description of transformation functions".
+    Link all transformation function descriptions to intern mathematical section instead of SVG.
+    Corrected typos.
+
 2012-02-10 dschulze@adobe.com
     Backported 3D decomposing code from FX Transforms.
     Backported "Transitions and animations between transform values" from CSS 3D Transforms.

--- NEW FILE: scale3d.png ---
(This appears to be a binary file; contents omitted.)

Index: Makefile
===================================================================
RCS file: /sources/public/csswg/css3-transforms/Makefile,v
retrieving revision 1.1
retrieving revision 1.2
diff -u -d -r1.1 -r1.2
--- Makefile	26 Oct 2011 00:45:04 -0000	1.1
+++ Makefile	13 Feb 2012 00:12:25 -0000	1.2
@@ -32,7 +32,7 @@
 # invoke make like this: "make PUBDATE=2008-03-19"
 PUBMSG=
 PUBDATE=
-USER=
+USER=dschulze
 
 W3C_CSS_DIR=~/work/W3C/cvs/dev.w3.org/csswg/css3-exclusions
 

--- NEW FILE: matrix.png ---
(This appears to be a binary file; contents omitted.)

Index: Transforms.src.html
===================================================================
RCS file: /sources/public/csswg/css3-transforms/Transforms.src.html,v
retrieving revision 1.25
retrieving revision 1.26
diff -u -d -r1.25 -r1.26
--- Transforms.src.html	10 Feb 2012 23:41:02 -0000	1.25
+++ Transforms.src.html	13 Feb 2012 00:12:25 -0000	1.26
@@ -187,8 +187,8 @@
             <dt id="TermTransformableElement"><dfn>transformable element</dfn></dt>
             <dd>
               <p>
-                A transformable element in the HTML namespace which is either be a block-level or atomic inline-level
-                element, or an element the SVG namespace (see [[SVG11]]) which has the attributes 'transform',
+                A transformable element in the HTML namespace which is either a block-level or atomic inline-level
+                element, or an element in the SVG namespace (see [[SVG11]]) which has the attributes 'transform',
                 'patternTransform' or 'gradientTransform'.
               </p>
             </dd>
@@ -1214,70 +1214,69 @@
                   <code class="css">matrix(&lt;number&gt;, &lt;number&gt;, &lt;number&gt;, &lt;number&gt;, &lt;number&gt;, &lt;number&gt;)</code>
                 </dt>
                 <dd>
-                  specifies a 2D transformation in the form of a <a href="http://www.w3.org/TR/SVG/coords.html#TransformMatrixDefined">transformation matrix</a> of six values. <code class="css">matrix(a,b,c,d,e,f)</code> is equivalent to applying the transformation matrix <strong>[a b c d e f]</strong>.
+                  specifies a 2D transformation in the form of a <a href="#MatrixDefined">transformation matrix</a> of the six values a-f.
                 </dd>
                 <dt>
                   <code class="css">translate(&lt;translation-value&gt;[, &lt;translation-value&gt;])</code>
                 </dt>
                 <dd>
-                  specifies a <a href="http://www.w3.org/TR/SVG/coords.html#TranslationDefined">2D translation</a> by the vector [tx, ty], where tx is the first translation-value parameter and ty is the optional second translation-value parameter. If <em>&lt;ty&gt;</em> is not provided, ty has zero as a value.
+                  specifies a <a href="#TranslateDefined">2D translation</a> by the vector [tx, ty], where tx is the first translation-value parameter and ty is the optional second translation-value parameter. If <em>&lt;ty&gt;</em> is not provided, ty has zero as a value.
                 </dd>
                 <dt>
                   <code class="css">translateX(&lt;translation-value&gt;)</code>
                 </dt>
                 <dd>
-                  specifies a <a href="http://www.w3.org/TR/SVG/coords.html#TranslationDefined">translation</a> by the given amount in the X direction.
+                  specifies a <a href="#TranslateDefined">translation</a> by the given amount in the X direction.
                 </dd>
                 <dt>
                   <code class="css">translateY(&lt;translation-value&gt;)</code>
                 </dt>
                 <dd>
-                  specifies a <a href="http://www.w3.org/TR/SVG/coords.html#TranslationDefined">translation</a> by the given amount in the Y direction.
+                  specifies a <a href="#TranslateDefined">translation</a> by the given amount in the Y direction.
                 </dd>
                 <dt>
                   <code class="css">scale(&lt;number&gt;[, &lt;number&gt;])</code>
                 </dt>
                 <dd>
-                  specifies a <a href="http://www.w3.org/TR/SVG/coords.html#ScalingDefined">2D scale</a> operation by the [sx,sy] scaling vector described by the 2 parameters. If the second parameter is not provided, it is takes a value equal to the first. For example, scale(1, 1) would leave an element unchanged, while scale(2, 2) would cause it to appear twice as long in both the X
+                  specifies a <a href="#ScaleDefined">2D scale</a> operation by the [sx,sy] scaling vector described by the 2 parameters. If the second parameter is not provided, it is takes a value equal to the first. For example, scale(1, 1) would leave an element unchanged, while scale(2, 2) would cause it to appear twice as long in both the X
                   and Y axes, or four times its typical geometric size.
                 </dd>
                 <dt>
                   <code class="css">scaleX(&lt;number&gt;)</code>
                 </dt>
                 <dd>
-                  specifies a scale operation using the [sx,1] scaling vector, where sx is given as the parameter.
+                  specifies a <a href="#ScaleDefined">2D scale</a> operation using the [sx,1] scaling vector, where sx is given as the parameter.
                 </dd>
                 <dt>
                   <code class="css">scaleY(&lt;number&gt;)</code>
                 </dt>
                 <dd>
-                  specifies a scale operation using the [1,sy] scaling vector, where sy is given as the parameter.
+                  specifies a <a href="#ScaleDefined">2D scale</a> operation using the [1,sy] scaling vector, where sy is given as the parameter.
                 </dd>
                 <dt>
                   <code class="css">rotate(&lt;angle&gt;[, &lt;translation-value&gt;, &lt;translation-value&gt;])</code>
                 </dt>
                 <dd>
-                  specifies a <a href="http://www.w3.org/TR/SVG/coords.html#RotationDefined">2D rotation</a> by the angle specified in the parameter about the origin of the element, as defined by the <em>transform-origin</em> property, or a given point as to the origin of the element. For example, rotate(90deg) would cause elements to appear
+                  specifies a <a href="#RotateDefined">2D rotation</a> by the angle specified in the parameter about the origin of the element, as defined by the <em>transform-origin</em> property, or a given point as to the origin of the element. For example, rotate(90deg) would cause elements to appear
                   rotated one-quarter of a turn in the clockwise direction. With rotate(90deg, 100px, 100px) the element appears rotated after a translation of 100px in the vertical and horizontal direction. The actual origin of the element is not affected.
                 </dd>
                 <dt>
-                  <code class="css">skew(&lt;x-angle&gt;[, &lt;y-angle&gt;])</code>
+                  <code class="css">skew(&lt;angle&gt;[, &lt;angle&gt;])</code>
                 </dt>
                 <dd>
-                  specifies a skew in X and Y. If <em>&lt;y-angle&gt;</em> is not provided, it is has a zero value.
-                  The resulting transformation matrix is [1, tan(y-angle), tan(x-angle), 1, 0, 0].
+                  specifies a <a href="#SkewDefined">2D skew</a> by [ax,ay] for X and Y. If the second parameter is not provided, it is has a zero value.
                 </dd>
                 <dt>
                   <code class="css">skewX(&lt;angle&gt;)</code>
                 </dt>
                 <dd>
-                  specifies a <a href="http://www.w3.org/TR/SVG/coords.html#SkewXDefined">skew transformation along the X axis</a> by the given angle.
+                  specifies a <a href="#SkewDefined">2D skew transformation along the X axis</a> by the given angle. The skew vector is [ax,0].
                 </dd>
                 <dt>
                   <code class="css">skewY(&lt;angle&gt;)</code>
                 </dt>
                 <dd>
-                  specifies a <a href="http://www.w3.org/TR/SVG/coords.html#SkewYDefined">skew transformation along the Y axis</a> by the given angle.
+                  specifies a <a href="#SkewDefined">2D skew transformation along the Y axis</a> by the given angle. The skew vector is [0,ay].
                 </dd>
               </dl>
 
@@ -1294,67 +1293,64 @@
                   <code class="css">translate3d(&lt;translation-value&gt;, &lt;translation-value&gt;, &lt;length&gt;)</code>
                 </dt>
                 <dd>
-                  specifies a 3D translation by the vector [tx,ty,tz], with tx, ty and tz being the first, second and third translation-value parameters respectively.
+                  specifies a <a href="#Translate3dDefined">3D translation</a> by the vector [tx,ty,tz], with tx, ty and tz being the first, second and third translation-value parameters respectively.
                 </dd>
                 <dt>
                   <code class="css">translateZ(&lt;length&gt;)</code>
                 </dt>
                 <dd>
-                  specifies a 3D translation by the given amount in the Z direction.
+                  specifies a <a href="#Translate3dDefined">3D translation</a> by the vector [0,0,tz] with the given amount in the Z direction.
                 </dd>
                 <dt>
                   <code class="css">scale3d(&lt;number&gt;, &lt;number&gt;, &lt;number&gt;)</code>
                 </dt>
                 <dd>
-                  specifies a 3D scale operation by the [sx,sy,sz] scaling vector described by the 3 parameters.
+                  specifies a <a href="#Scale3dDefined">3D scale</a> operation by the [sx,sy,sz] scaling vector described by the 3 parameters.
                 </dd>
                 <dt>
                   <code class="css">scaleZ(&lt;number&gt;)</code>
                 </dt>
                 <dd>
-                  specifies a scale operation using the [1,1,sz] scaling vector, where sz is given as the parameter.
+                  specifies a <a href="#Scale3dDefined">3D scale</a> operation using the [1,1,sz] scaling vector, where sz is given as the parameter.
                 </dd>
                 <dt>
                   <code class="css">rotate3d(&lt;number&gt;, &lt;number&gt;, &lt;number&gt;, &lt;angle&gt;)</code>
                 </dt>
                 <div class="todo">Clarify "clockwise". Describe in terms of right-hand rule?</div>
                 <dd>
-                  specifies a clockwise 3D rotation by the angle specified in last
+                  specifies a clockwise <a href="#Rotate3dDefined">3D rotation</a> by the angle specified in last
                   parameter about the [x,y,z] direction vector described by the first 3
                   parameters. If the direction vector is not of unit length, it will be
-                  normalized. A direction vector that cannot be normalized, such as [0,
-                  0, 0], will cause the rotation to not be applied. This function is
-                  equivalent to <code>matrix3d(1 + (1-cos(angle))*(x*x-1), -z*sin(angle)+(1-cos(angle))*x*y, y*sin(angle)+(1-cos(angle))*x*z, 0, z*sin(angle)+(1-cos(angle))*x*y, 1 + (1-cos(angle))*(y*y-1), -x*sin(angle)+(1-cos(angle))*y*z, 0, -y*sin(angle)+(1-cos(angle))*x*z, x*sin(angle)+(1-cos(angle))*y*z, 1 + (1-cos(angle))*(z*z-1), 0, 0, 0, 0, 1)</code>.</dd>
+                  normalized. A direction vector that cannot be normalized, such as [0,0,0], will cause the rotation to not be applied.
+                </dd>
                 <dt>
                   <code class="css">rotateX(&lt;angle&gt;)</code>
                 </dt>
                 <dd>
-                  specifies a clockwise rotation by the given angle about the X axis.
+                  specifies a clockwise <a href="#RotateXDefined">3D rotation</a> by the given angle about the X axis.
                 </dd>
                 <dt>
                   <code class="css">rotateY(&lt;angle&gt;)</code>
                 </dt>
                 <dd>
-                  specifies a clockwise rotation by the given angle about the Y axis.
+                  specifies a clockwise <a href="#RotateYDefined">3D rotation</a> by the given angle about the Y axis.
                 </dd>
                 <dt>
                   <code class="css">rotateZ(&lt;angle&gt;)</code>
                 </dt>
                 <dd>
-                  specifies a clockwise rotation by the given angle about the Z axis. This is a synonym for <code class="css">rotate(&lt;angle&gt;)</code>.
+                  specifies a clockwise <a href="#RotateZDefined">3D rotation</a> by the given angle about the Z axis. This is a synonym for <code class="css">rotate(&lt;angle&gt;)</code>.
                 </dd>
                 <dt>
                   <code class="css">perspective(&lt;length&gt;)</code>
                 </dt>
                 <dd>
-                  specifies a perspective projection matrix. This matrix scales points in X and Y based on their Z value,
+                  specifies a <a href="#PerspectiveDefined">perspective projection matrix</a>. This matrix scales points in X and Y based on their Z value,
                   scaling points with positive Z values away from the origin, and those with negative Z values towards the
                   origin. Points on the z=0 plane are unchanged. The <em>depth</em>, given as the parameter to the function,
                   represents the distance of the z=0 plane from the viewer. Lower values give a more flattened pyramid and
                   therefore a more pronounced perspective effect. For example, a value of 1000px
-                  gives a moderate amount of foreshortening and a value of 200px gives an extreme amount. The matrix
-                  is computed by starting with an identity matrix and replacing the value at row 3, column 4 with
-                  the value -1/depth. The value for depth must be greater than zero, otherwise the function is invalid.
+                  gives a moderate amount of foreshortening and a value of 200px gives an extreme amount. The value for depth must be greater than zero, otherwise the function is invalid.
                 </dd>
               </dl>
 
@@ -1669,6 +1665,90 @@
           matrix3d(1,0,0,0, 0,1,0,0, skew[1],0,1,0, 0,0,0,1)
           matrix3d(1,0,0,0, skew[0],1,0,0, 0,0,1,0, 0,0,0,1)
           scale3d(scale[0], scale[1], scale[2])</pre>
+          
+              <h2 id="mathematical-description">
+                Mathematical description of transformation functions
+              </h2>
+              <p>
+                Mathematically, all transformation functions can be represented as 4x4 transformation matrices of the following form:
+              </p>
+              <img src="4x4matrix.png" title="\begin{bmatrix} m11 & m21 & m31 & m41 \\ m12 & m22 & m32 & m42 \\ m13 & m23 & m33 & m43 \\ m14 & m24 & m34 & m44 \end{bmatrix}" width="222" height="106">
+
+              <ul>
+                <li id="MatrixDefined">
+                  <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 to the matrix:
+                  </p>
+                  <img src="matrix.png" title="\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>
+                    A 2D translation with the parameters <em>tx</em> and <em>ty</em> is equivalent to a <a href="#Translate3dDefined">3D translation</a> where <em>tz</em> has zero as a value.
+                  </p>
+                </li>
+                <li id="ScaleDefined">
+                  <p>
+                    A 2D scaling with the parameters <em>sx</em> and <em>sy</em> is equivalent to a <a href="#Scale3dDefined">3D scale</a> where <em>sz</em> has one as a value.
+                  </p>
+                </li>
+                <li id="RotateDefined">
+                  <p>
+                    A 2D rotation with the parameter <em>alpha</em> is equivalent to a <a href="#RotateZDefined">rotation around the Z axis</a>.
+                  </p>
+                </li>
+                <li id="SkewDefined">
+                  <p>
+                    A 2D skew transformation with the parameters <em>alpha</em> and <em>beta</em> is equivalent to the matrix:
+                  </p>
+                  <img src="skew.png" title="\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="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" title="\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" title="\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" title="\begin{bmatrix} 1 - 2 \cdot (x^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 (z^2 + x^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" title="\newline sc = \sin (\alpha) \cdot \cos (\alpha) \newline sq = \sin^2 (\alpha)" width="177" height="50">
+                </li>
+                <li id="RotateXDefined">
+                  <p>
+                    A 3D rotation about the X axis with the parameter <em>alpha</em> is equivalent to the matrix:
+                  </p>
+                  <img src="rotateX.png" title="\begin{bmatrix} 1 & 0 & 0 & 0 \\ 0 & \cos(\alpha) & -\sin(\alpha) & 0 \\ 0 & \sin(\alpha) & \cos(\alpha) & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix}" width="220" height="106">
+                </li>
+                <li id="RotateYDefined">
+                  <p>
+                    A 3D rotation about the Y axis with the parameter <em>alpha</em> is equivalent to the matrix:
+                  </p>
+                  <img src="rotateY.png" title="\begin{bmatrix} \cos(\alpha) & 0 & \sin(\alpha) & 0 \\ 0 & 1 & 0 & 0 \\ -\sin(\alpha) & 0 & \cos(\alpha) & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix}" width="220" height="106">
+                </li>
+                <li id="RotateZDefined">
+                  <p>
+                    A 3D rotation about the Z axis with the parameter <em>alpha</em> is equivalent to the matrix:
+                  </p>
+                  <img src="rotateZ.png" title="\begin{bmatrix} \cos(\alpha) & -\sin(\alpha) & 0 & 0 \\ \sin(\alpha) & \cos(\alpha) & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix}" width="220" height="106">
+                </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" title="\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>
 
               <h2 id="dom-interfaces">
                 DOM Interfaces

Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-transforms/Overview.html,v
retrieving revision 1.22
retrieving revision 1.23
diff -u -d -r1.22 -r1.23
--- Overview.html	10 Feb 2012 23:41:02 -0000	1.22
+++ Overview.html	13 Feb 2012 00:12:25 -0000	1.23
@@ -36,15 +36,15 @@
 
    <h1>CSS Transforms</h1>
 
-   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 10 February
+   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 13 February
     2012</h2>
 
    <dl>
     <dt>This version:
 
     <dd> <a
-     href="http://www.w3.org/TR/2012/ED-css3-transforms-20120210/">http://dev.w3.org/csswg/css3-transforms/</a>
-     <!--http://www.w3.org/TR/2012/WD-css3-transforms-20120210-->
+     href="http://www.w3.org/TR/2012/ED-css3-transforms-20120213/">http://dev.w3.org/csswg/css3-transforms/</a>
+     <!--http://www.w3.org/TR/2012/WD-css3-transforms-20120213-->
 
     <dt>Latest version:
 
@@ -227,14 +227,17 @@
       </span>Recomposing the matrix</a>
     </ul>
 
-   <li><a href="#dom-interfaces"><span class=secno>16. </span> DOM Interfaces
+   <li><a href="#mathematical-description"><span class=secno>16. </span>
+    Mathematical description of transformation functions </a>
+
+   <li><a href="#dom-interfaces"><span class=secno>17. </span> DOM Interfaces
     </a>
     <ul class=toc>
-     <li><a href="#cssmatrix-interface"><span class=secno>16.1. </span>
+     <li><a href="#cssmatrix-interface"><span class=secno>17.1. </span>
       CSSMatrix </a>
     </ul>
 
-   <li><a href="#references"><span class=secno>17. </span>References</a>
+   <li><a href="#references"><span class=secno>18. </span>References</a>
     <ul class=toc>
      <li class=no-num><a href="#normative-references">Normative
       references</a>
@@ -346,8 +349,8 @@
     id=transformable-element>transformable element</dfn>
 
    <dd>
-    <p> A transformable element in the HTML namespace which is either be a
-     block-level or atomic inline-level element, or an element the SVG
+    <p> A transformable element in the HTML namespace which is either a
+     block-level or atomic inline-level element, or an element in the SVG
      namespace (see <a href="#SVG11"
      rel=biblioentry>[SVG11]<!--{{SVG11}}--></a>) which has the attributes
      &lsquo;<a href="#effects"><code
@@ -1341,84 +1344,71 @@
     &lt;number&gt;, &lt;number&gt;, &lt;number&gt;, &lt;number&gt;)</code>
 
    <dd> specifies a 2D transformation in the form of a <a
-    href="http://www.w3.org/TR/SVG/coords.html#TransformMatrixDefined">transformation
-    matrix</a> of six values. <code class=css>matrix(a,b,c,d,e,f)</code> is
-    equivalent to applying the transformation matrix <strong>[a b c d e
-    f]</strong>.
+    href="#MatrixDefined">transformation matrix</a> of the six values a-f.
 
    <dt> <code class=css>translate(&lt;translation-value&gt;[,
     &lt;translation-value&gt;])</code>
 
-   <dd> specifies a <a
-    href="http://www.w3.org/TR/SVG/coords.html#TranslationDefined">2D
-    translation</a> by the vector [tx, ty], where tx is the first
-    translation-value parameter and ty is the optional second
-    translation-value parameter. If <em>&lt;ty&gt;</em> is not provided, ty
-    has zero as a value.
+   <dd> specifies a <a href="#TranslateDefined">2D translation</a> by the
+    vector [tx, ty], where tx is the first translation-value parameter and ty
+    is the optional second translation-value parameter. If
+    <em>&lt;ty&gt;</em> is not provided, ty has zero as a value.
 
    <dt> <code class=css>translateX(&lt;translation-value&gt;)</code>
 
-   <dd> specifies a <a
-    href="http://www.w3.org/TR/SVG/coords.html#TranslationDefined">translation</a>
-    by the given amount in the X direction.
+   <dd> specifies a <a href="#TranslateDefined">translation</a> by the given
+    amount in the X direction.
 
    <dt> <code class=css>translateY(&lt;translation-value&gt;)</code>
 
-   <dd> specifies a <a
-    href="http://www.w3.org/TR/SVG/coords.html#TranslationDefined">translation</a>
-    by the given amount in the Y direction.
+   <dd> specifies a <a href="#TranslateDefined">translation</a> by the given
+    amount in the Y direction.
 
    <dt> <code class=css>scale(&lt;number&gt;[, &lt;number&gt;])</code>
 
-   <dd> specifies a <a
-    href="http://www.w3.org/TR/SVG/coords.html#ScalingDefined">2D scale</a>
-    operation by the [sx,sy] scaling vector described by the 2 parameters. If
-    the second parameter is not provided, it is takes a value equal to the
-    first. For example, scale(1, 1) would leave an element unchanged, while
-    scale(2, 2) would cause it to appear twice as long in both the X and Y
-    axes, or four times its typical geometric size.
+   <dd> specifies a <a href="#ScaleDefined">2D scale</a> operation by the
+    [sx,sy] scaling vector described by the 2 parameters. If the second
+    parameter is not provided, it is takes a value equal to the first. For
+    example, scale(1, 1) would leave an element unchanged, while scale(2, 2)
+    would cause it to appear twice as long in both the X and Y axes, or four
+    times its typical geometric size.
 
    <dt> <code class=css>scaleX(&lt;number&gt;)</code>
 
-   <dd> specifies a scale operation using the [sx,1] scaling vector, where sx
-    is given as the parameter.
+   <dd> specifies a <a href="#ScaleDefined">2D scale</a> operation using the
+    [sx,1] scaling vector, where sx is given as the parameter.
 
    <dt> <code class=css>scaleY(&lt;number&gt;)</code>
 
-   <dd> specifies a scale operation using the [1,sy] scaling vector, where sy
-    is given as the parameter.
+   <dd> specifies a <a href="#ScaleDefined">2D scale</a> operation using the
+    [1,sy] scaling vector, where sy is given as the parameter.
 
    <dt> <code class=css>rotate(&lt;angle&gt;[, &lt;translation-value&gt;,
     &lt;translation-value&gt;])</code>
 
-   <dd> specifies a <a
-    href="http://www.w3.org/TR/SVG/coords.html#RotationDefined">2D
-    rotation</a> by the angle specified in the parameter about the origin of
-    the element, as defined by the <a
-    href="#transform-origin"><em>transform-origin</em></a> property, or a
-    given point as to the origin of the element. For example, rotate(90deg)
-    would cause elements to appear rotated one-quarter of a turn in the
-    clockwise direction. With rotate(90deg, 100px, 100px) the element appears
-    rotated after a translation of 100px in the vertical and horizontal
-    direction. The actual origin of the element is not affected.
+   <dd> specifies a <a href="#RotateDefined">2D rotation</a> by the angle
+    specified in the parameter about the origin of the element, as defined by
+    the <a href="#transform-origin"><em>transform-origin</em></a> property,
+    or a given point as to the origin of the element. For example,
+    rotate(90deg) would cause elements to appear rotated one-quarter of a
+    turn in the clockwise direction. With rotate(90deg, 100px, 100px) the
+    element appears rotated after a translation of 100px in the vertical and
+    horizontal direction. The actual origin of the element is not affected.
 
-   <dt> <code class=css>skew(&lt;x-angle&gt;[, &lt;y-angle&gt;])</code>
+   <dt> <code class=css>skew(&lt;angle&gt;[, &lt;angle&gt;])</code>
 
-   <dd> specifies a skew in X and Y. If <em>&lt;y-angle&gt;</em> is not
-    provided, it is has a zero value. The resulting transformation matrix is
-    [1, tan(y-angle), tan(x-angle), 1, 0, 0].
+   <dd> specifies a <a href="#SkewDefined">2D skew</a> by [ax,ay] for X and
+    Y. If the second parameter is not provided, it is has a zero value.
 
    <dt> <code class=css>skewX(&lt;angle&gt;)</code>
 
-   <dd> specifies a <a
-    href="http://www.w3.org/TR/SVG/coords.html#SkewXDefined">skew
-    transformation along the X axis</a> by the given angle.
+   <dd> specifies a <a href="#SkewDefined">2D skew transformation along the X
+    axis</a> by the given angle. The skew vector is [ax,0].
 
    <dt> <code class=css>skewY(&lt;angle&gt;)</code>
 
-   <dd> specifies a <a
-    href="http://www.w3.org/TR/SVG/coords.html#SkewYDefined">skew
-    transformation along the Y axis</a> by the given angle.
+   <dd> specifies a <a href="#SkewDefined">2D skew transformation along the Y
+    axis</a> by the given angle. The skew vector is [0,ay].
   </dl>
 
   <h3 id=three-d-transform-functions><span class=secno>12.2. </span>3D
@@ -1437,24 +1427,25 @@
    <dt> <code class=css>translate3d(&lt;translation-value&gt;,
     &lt;translation-value&gt;, &lt;length&gt;)</code>
 
-   <dd> specifies a 3D translation by the vector [tx,ty,tz], with tx, ty and
-    tz being the first, second and third translation-value parameters
-    respectively.
+   <dd> specifies a <a href="#Translate3dDefined">3D translation</a> by the
+    vector [tx,ty,tz], with tx, ty and tz being the first, second and third
+    translation-value parameters respectively.
 
    <dt> <code class=css>translateZ(&lt;length&gt;)</code>
 
-   <dd> specifies a 3D translation by the given amount in the Z direction.
+   <dd> specifies a <a href="#Translate3dDefined">3D translation</a> by the
+    vector [0,0,tz] with the given amount in the Z direction.
 
    <dt> <code class=css>scale3d(&lt;number&gt;, &lt;number&gt;,
     &lt;number&gt;)</code>
 
-   <dd> specifies a 3D scale operation by the [sx,sy,sz] scaling vector
-    described by the 3 parameters.
+   <dd> specifies a <a href="#Scale3dDefined">3D scale</a> operation by the
+    [sx,sy,sz] scaling vector described by the 3 parameters.
 
    <dt> <code class=css>scaleZ(&lt;number&gt;)</code>
 
-   <dd> specifies a scale operation using the [1,1,sz] scaling vector, where
-    sz is given as the parameter.
+   <dd> specifies a <a href="#Scale3dDefined">3D scale</a> operation using
+    the [1,1,sz] scaling vector, where sz is given as the parameter.
 
    <dt> <code class=css>rotate3d(&lt;number&gt;, &lt;number&gt;,
     &lt;number&gt;, &lt;angle&gt;)</code>
@@ -1463,45 +1454,40 @@
   <div class=todo>Clarify "clockwise". Describe in terms of right-hand rule?</div>
 
   <dl>
-   <dd> specifies a clockwise 3D rotation by the angle specified in last
-    parameter about the [x,y,z] direction vector described by the first 3
-    parameters. If the direction vector is not of unit length, it will be
-    normalized. A direction vector that cannot be normalized, such as [0, 0,
-    0], will cause the rotation to not be applied. This function is
-    equivalent to <code>matrix3d(1 + (1-cos(angle))*(x*x-1),
-    -z*sin(angle)+(1-cos(angle))*x*y, y*sin(angle)+(1-cos(angle))*x*z, 0,
-    z*sin(angle)+(1-cos(angle))*x*y, 1 + (1-cos(angle))*(y*y-1),
-    -x*sin(angle)+(1-cos(angle))*y*z, 0, -y*sin(angle)+(1-cos(angle))*x*z,
-    x*sin(angle)+(1-cos(angle))*y*z, 1 + (1-cos(angle))*(z*z-1), 0, 0, 0, 0,
-    1)</code>.
+   <dd> specifies a clockwise <a href="#Rotate3dDefined">3D rotation</a> by
+    the angle specified in last parameter about the [x,y,z] direction vector
+    described by the first 3 parameters. If the direction vector is not of
+    unit length, it will be normalized. A direction vector that cannot be
+    normalized, such as [0,0,0], will cause the rotation to not be applied.
 
    <dt> <code class=css>rotateX(&lt;angle&gt;)</code>
 
-   <dd> specifies a clockwise rotation by the given angle about the X axis.
+   <dd> specifies a clockwise <a href="#RotateXDefined">3D rotation</a> by
+    the given angle about the X axis.
 
    <dt> <code class=css>rotateY(&lt;angle&gt;)</code>
 
-   <dd> specifies a clockwise rotation by the given angle about the Y axis.
+   <dd> specifies a clockwise <a href="#RotateYDefined">3D rotation</a> by
+    the given angle about the Y axis.
 
    <dt> <code class=css>rotateZ(&lt;angle&gt;)</code>
 
-   <dd> specifies a clockwise rotation by the given angle about the Z axis.
-    This is a synonym for <code class=css>rotate(&lt;angle&gt;)</code>.
+   <dd> specifies a clockwise <a href="#RotateZDefined">3D rotation</a> by
+    the given angle about the Z axis. This is a synonym for <code
+    class=css>rotate(&lt;angle&gt;)</code>.
 
    <dt> <code class=css>perspective(&lt;length&gt;)</code>
 
-   <dd> specifies a perspective projection matrix. This matrix scales points
-    in X and Y based on their Z value, scaling points with positive Z values
-    away from the origin, and those with negative Z values towards the
-    origin. Points on the z=0 plane are unchanged. The <em>depth</em>, given
-    as the parameter to the function, represents the distance of the z=0
-    plane from the viewer. Lower values give a more flattened pyramid and
-    therefore a more pronounced perspective effect. For example, a value of
-    1000px gives a moderate amount of foreshortening and a value of 200px
-    gives an extreme amount. The matrix is computed by starting with an
-    identity matrix and replacing the value at row 3, column 4 with the value
-    -1/depth. The value for depth must be greater than zero, otherwise the
-    function is invalid.
+   <dd> specifies a <a href="#PerspectiveDefined">perspective projection
+    matrix</a>. This matrix scales points in X and Y based on their Z value,
+    scaling points with positive Z values away from the origin, and those
+    with negative Z values towards the origin. Points on the z=0 plane are
+    unchanged. The <em>depth</em>, given as the parameter to the function,
+    represents the distance of the z=0 plane from the viewer. Lower values
+    give a more flattened pyramid and therefore a more pronounced perspective
+    effect. For example, a value of 1000px gives a moderate amount of
+    foreshortening and a value of 200px gives an extreme amount. The value
+    for depth must be greater than zero, otherwise the function is invalid.
   </dl>
   <!-- ======================================================================================================= -->
 
@@ -1804,12 +1790,106 @@
           matrix3d(1,0,0,0, skew[0],1,0,0, 0,0,1,0, 0,0,0,1)
           scale3d(scale[0], scale[1], scale[2])</pre>
 
-  <h2 id=dom-interfaces><span class=secno>16. </span> DOM Interfaces</h2>
+  <h2 id=mathematical-description><span class=secno>16. </span> Mathematical
+   description of transformation functions</h2>
+
+  <p> Mathematically, all transformation functions can be represented as 4x4
+   transformation matrices of the following form:
+
+  <p><img height=106 src=4x4matrix.png
+   title="\begin{bmatrix} m11 & m21 & m31 & m41 \\ m12 & m22 & m32 & m42 \\ m13 & m23 & m33 & m43 \\ m14 & m24 & m34 & m44 \end{bmatrix}"
+   width=222>
+
+  <ul>
+   <li id=MatrixDefined>
+    <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 to
+     the matrix:</p>
+    <img height=106 src=matrix.png
+    title="\begin{bmatrix} a & c & 0 & e \\ b & d & 0 & f \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix}"
+    width=108>
+
+   <li id=TranslateDefined>
+    <p> A 2D translation with the parameters <em>tx</em> and <em>ty</em> is
+     equivalent to a <a href="#Translate3dDefined">3D translation</a> where
+     <em>tz</em> has zero as a value.</p>
+
+   <li id=ScaleDefined>
+    <p> A 2D scaling with the parameters <em>sx</em> and <em>sy</em> is
+     equivalent to a <a href="#Scale3dDefined">3D scale</a> where <em>sz</em>
+     has one as a value.</p>
+
+   <li id=RotateDefined>
+    <p> A 2D rotation with the parameter <em>alpha</em> is equivalent to a <a
+     href="#RotateZDefined">rotation around the Z axis</a>.</p>
+
+   <li id=SkewDefined>
+    <p> A 2D skew transformation with the parameters <em>alpha</em> and
+     <em>beta</em> is equivalent to the matrix:</p>
+    <img height=106 src=skew.png
+    title="\begin{bmatrix} 1 & \tan(\alpha) & 0 & 0 \\ \tan(\beta) & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix}"
+    width=205>
+
+   <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 height=106 src=translate3d.png
+    title="\begin{bmatrix} 1 & 0 & 0 & tx \\ 0 & 1 & 0 & ty \\ 0 & 0 & 1 & tz \\ 0 & 0 & 0 & 1 \end{bmatrix}"
+    width=114>
+
+   <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 height=106 src=scale3d.png
+    title="\begin{bmatrix} sx & 0 & 0 & 0 \\ 0 & sy & 0 & 0 \\ 0 & 0 & sz & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix}"
+    width=137>
+
+   <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 height=106 src=rotate3dmatrix.png
+    title="\begin{bmatrix} 1 - 2 \cdot (x^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 (z^2 + x^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>
+    <p> where:</p>
+    <img height=50 src=rotate3dvariables.png
+    title="\newline sc = \sin (\alpha) \cdot \cos (\alpha) \newline sq = \sin^2 (\alpha)"
+    width=177>
+
+   <li id=RotateXDefined>
+    <p> A 3D rotation about the X axis with the parameter <em>alpha</em> is
+     equivalent to the matrix:</p>
+    <img height=106 src=rotateX.png
+    title="\begin{bmatrix} 1 & 0 & 0 & 0 \\ 0 & \cos(\alpha) & -\sin(\alpha) & 0 \\ 0 & \sin(\alpha) & \cos(\alpha) & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix}"
+    width=220>
+
+   <li id=RotateYDefined>
+    <p> A 3D rotation about the Y axis with the parameter <em>alpha</em> is
+     equivalent to the matrix:</p>
+    <img height=106 src=rotateY.png
+    title="\begin{bmatrix} \cos(\alpha) & 0 & \sin(\alpha) & 0 \\ 0 & 1 & 0 & 0 \\ -\sin(\alpha) & 0 & \cos(\alpha) & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix}"
+    width=220>
+
+   <li id=RotateZDefined>
+    <p> A 3D rotation about the Z axis with the parameter <em>alpha</em> is
+     equivalent to the matrix:</p>
+    <img height=106 src=rotateZ.png
+    title="\begin{bmatrix} \cos(\alpha) & -\sin(\alpha) & 0 & 0 \\ \sin(\alpha) & \cos(\alpha) & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix}"
+    width=220>
+
+   <li id=PerspectiveDefined>
+    <p> A perspective projection matrix with the parameter <em>d</em> is
+     equivalent to the matrix:</p>
+    <img height=106 src=perspective.png
+    title="\begin{bmatrix} 1 & 0 & 0 & 0 \\ 0 & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & -1/d & 1 \end{bmatrix}"
+    width=143>
+  </ul>
+
+  <h2 id=dom-interfaces><span class=secno>17. </span> DOM Interfaces</h2>
 
   <p> This section describes the interfaces and functionality added to the
    DOM to support runtime access to the functionality described above.
 
-  <h3 id=cssmatrix-interface><span class=secno>16.1. </span> CSSMatrix</h3>
+  <h3 id=cssmatrix-interface><span class=secno>17.1. </span> CSSMatrix</h3>
 
   <div class=issue>
    <p class=desc>We actually describe a 3x2 matrix here, similar to <a
@@ -2178,7 +2258,7 @@
    <!-- Interface CSSMatrix -->
   </dl>
 
-  <h2 id=references><span class=secno>17. </span>References</h2>
+  <h2 id=references><span class=secno>18. </span>References</h2>
 
   <h3 class=no-num id=normative-references>Normative references</h3>
   <!--begin-normative-->

--- NEW FILE: perspective.png ---
(This appears to be a binary file; contents omitted.)

--- NEW FILE: rotateZ.png ---
(This appears to be a binary file; contents omitted.)

--- NEW FILE: rotateY.png ---
(This appears to be a binary file; contents omitted.)

--- NEW FILE: rotateX.png ---
(This appears to be a binary file; contents omitted.)
Received on Monday, 13 February 2012 00:12:31 UTC

This archive was generated by hypermail 2.3.1 : Tuesday, 6 January 2015 20:44:50 UTC