- From: Dirk Schulze via cvs-syncmail <cvsmail@w3.org>
- Date: Mon, 13 Feb 2012 00:12:28 +0000
- To: public-css-commits@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(<number>, <number>, <number>, <number>, <number>, <number>)</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(<translation-value>[, <translation-value>])</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><ty></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><ty></em> is not provided, ty has zero as a value.
</dd>
<dt>
<code class="css">translateX(<translation-value>)</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(<translation-value>)</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(<number>[, <number>])</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(<number>)</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(<number>)</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(<angle>[, <translation-value>, <translation-value>])</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(<x-angle>[, <y-angle>])</code>
+ <code class="css">skew(<angle>[, <angle>])</code>
</dt>
<dd>
- specifies a skew in X and Y. If <em><y-angle></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(<angle>)</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(<angle>)</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(<translation-value>, <translation-value>, <length>)</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(<length>)</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(<number>, <number>, <number>)</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(<number>)</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(<number>, <number>, <number>, <angle>)</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(<angle>)</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(<angle>)</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(<angle>)</code>
</dt>
<dd>
- specifies a clockwise rotation by the given angle about the Z axis. This is a synonym for <code class="css">rotate(<angle>)</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(<angle>)</code>.
</dd>
<dt>
<code class="css">perspective(<length>)</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
‘<a href="#effects"><code
@@ -1341,84 +1344,71 @@
<number>, <number>, <number>, <number>)</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(<translation-value>[,
<translation-value>])</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><ty></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><ty></em> is not provided, ty has zero as a value.
<dt> <code class=css>translateX(<translation-value>)</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(<translation-value>)</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(<number>[, <number>])</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(<number>)</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(<number>)</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(<angle>[, <translation-value>,
<translation-value>])</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(<x-angle>[, <y-angle>])</code>
+ <dt> <code class=css>skew(<angle>[, <angle>])</code>
- <dd> specifies a skew in X and Y. If <em><y-angle></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(<angle>)</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(<angle>)</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(<translation-value>,
<translation-value>, <length>)</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(<length>)</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(<number>, <number>,
<number>)</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(<number>)</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(<number>, <number>,
<number>, <angle>)</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(<angle>)</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(<angle>)</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(<angle>)</code>
- <dd> specifies a clockwise rotation by the given angle about the Z axis.
- This is a synonym for <code class=css>rotate(<angle>)</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(<angle>)</code>.
<dt> <code class=css>perspective(<length>)</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