- From: Dirk Schulze via cvs-syncmail <cvsmail@w3.org>
- Date: Mon, 13 Feb 2012 05:55:41 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-transforms
In directory hutz:/tmp/cvs-serv9867
Modified Files:
ChangeLog Overview.html Transforms.src.html
Log Message:
2012-02-12 dschulze@adobe.com
Merged CSSMatrix from current spec with CSS 3D Transforms.
Added function 'isAffineTransform' that returns 'true' if the matrix doesn't have any 3D components.
CSSMatrix is always a 4x4 matrix now.
Removed all wordings about 3x2 matrices with the exception of the matrix() function.
(https://www.w3.org/Bugs/Public/show_bug.cgi?id=15959)
Back ported CSSTransformValue interface from CSS 3D Transforms.
Index: ChangeLog
===================================================================
RCS file: /sources/public/csswg/css3-transforms/ChangeLog,v
retrieving revision 1.13
retrieving revision 1.14
diff -u -d -r1.13 -r1.14
--- ChangeLog 13 Feb 2012 00:12:25 -0000 1.13
+++ ChangeLog 13 Feb 2012 05:55:39 -0000 1.14
@@ -1,4 +1,12 @@
2012-02-12 dschulze@adobe.com
+ Merged CSSMatrix from current spec with CSS 3D Transforms.
+ Added function 'isAffineTransform' that returns 'true' if the matrix doesn't have any 3D components.
+ CSSMatrix is always a 4x4 matrix now.
+ Removed all wordings about 3x2 matrices with the exception of the matrix() function.
+ (https://www.w3.org/Bugs/Public/show_bug.cgi?id=15959)
+ Back ported CSSTransformValue interface from CSS 3D Transforms.
+
+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.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-transforms/Overview.html,v
retrieving revision 1.23
retrieving revision 1.24
diff -u -d -r1.23 -r1.24
--- Overview.html 13 Feb 2012 00:12:25 -0000 1.23
+++ Overview.html 13 Feb 2012 05:55:39 -0000 1.24
@@ -235,6 +235,9 @@
<ul class=toc>
<li><a href="#cssmatrix-interface"><span class=secno>17.1. </span>
CSSMatrix </a>
+
+ <li><a href="#csstransformvalue-interface"><span class=secno>17.2.
+ </span> CSSTransformValue </a>
</ul>
<li><a href="#references"><span class=secno>18. </span>References</a>
@@ -1621,8 +1624,7 @@
can't are decomposed into the most accurate representation possible, using
the technique below. This technique is taken from the "unmatrix" method in
"Graphics Gems II, edited by Jim Arvo". The pseudocode below works on a
- 4x4 homogeneous matrix. A 3x2 2D matrix is therefore first converted to
- 4x4 homogeneous form.
+ 4x4 homogeneous matrix.
<h3 id=unmatrix><span class=secno>15.1. </span>Unmatrix</h3>
@@ -1892,11 +1894,6 @@
<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
- href="http://www.w3.org/TR/SVG/coords.html#InterfaceSVGMatrix">SVGMatrix</a>.</p>
- </div>
-
- <div class=issue>
<p class=desc>We need to resolve how SVGMatrix and CSSMatrix work together
(<a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15498">bug
15498</a>).</p>
@@ -1907,7 +1904,7 @@
name=DOM-CSSMatrix>CSSMatrix</a></i></b>
<dd>
- <p> The <code>CSSMatrix</code> interface represents a 3x2 homogeneous
+ <p> The <code>CSSMatrix</code> interface represents a 4x4 homogeneous
matrix.</p>
<dl>
@@ -1924,14 +1921,33 @@
attribute double e;
attribute double f;
+ attribute double m11;
+ attribute double m12;
+ attribute double m13;
+ attribute double m14;
+ attribute double m21;
+ attribute double m22;
+ attribute double m23;
+ attribute double m24;
+ attribute double m31;
+ attribute double m32;
+ attribute double m33;
+ attribute double m34;
+ attribute double m41;
+ attribute double m42;
+ attribute double m43;
+ attribute double m44;
+
void setMatrixValue(in DOMString string) raises(DOMException);
+ boolean isAffineTransform();
CSSMatrix multiply(in CSSMatrix secondMatrix);
CSSMatrix inverse() raises(DOMException);
- CSSMatrix translate(in double x, in double y);
- CSSMatrix scale(in double scaleX, in double scaleY);
+ CSSMatrix translate(in double x, in double y, optional in double z);
+ CSSMatrix scale(in double scaleX, optional in double scaleY, optional in double scaleZ);
+ CSSMatrix rotate(in double rotX, optional in double rotY, optional in double rotZ);
+ CSSMatrix rotateAxisAngle(in double x, in double y, in double z, in double angle);
CSSMatrix skewX(in double angle);
CSSMatrix skewY(in double angle);
- CSSMatrix rotate(in double angle);
};</pre>
</div>
<br>
@@ -1942,10 +1958,40 @@
<dd>
<dl>
- <dt> <code class=attribute-name><a id=DOM-CSSMatrix-matrix
- name=DOM-CSSMatrix-matrix>a-f</a></code> of type <code>double</code>
+ <dt> <code class=attribute-name>a</code> of type <code>double</code>
- <dd> Each of these attributes represents one of the values in the 3x2
+ <dd> Points to the value of attribute <code>m11</code> in the 4x4
+ matrix.<br>
+
+ <dt> <code class=attribute-name>b</code> of type <code>double</code>
+
+ <dd> Points to the value of attribute <code>m12</code> in the 4x4
+ matrix.<br>
+
+ <dt> <code class=attribute-name>c</code> of type <code>double</code>
+
+ <dd> Points to the value of attribute <code>m21</code> in the 4x4
+ matrix.<br>
+
+ <dt> <code class=attribute-name>d</code> of type <code>double</code>
+
+ <dd> Points to the value of attribute <code>m22</code> in the 4x4
+ matrix.<br>
+
+ <dt> <code class=attribute-name>e</code> of type <code>double</code>
+
+ <dd> Points to the value of attribute <code>m41</code> in the 4x4
+ matrix.<br>
+
+ <dt> <code class=attribute-name>f</code> of type <code>double</code>
+
+ <dd> Points to the value of attribute <code>m42</code> in the 4x4
+ matrix.<br>
+
+ <dt> <code class=attribute-name>m11-m44</code> of type
+ <code>double</code>
+
+ <dd> Each of these attributes represents one of the values in the 4x4
matrix.<br>
</dl>
</dd>
@@ -1992,6 +2038,32 @@
<!-- setMatrixValue -->
<!-- ===================================================== -->
+ <dt> <code class=method-name><a id=DOM-CSSMatrix-isAffineTransform
+ name=DOM-CSSMatrix-isAffineTransform>isAffineTransform</a></code>
+
+ <dd>
+ <div class=method> The <code>isAffineTransform</code> returns true,
+ if the matrix does not contain three dimensional components.
+ Therefore if m13 = m14 = m23 = m24 = m31 = m32 = m34 = m43 = 0 and
+ m33 = m44 = 1.
+ <div class=parameters> <b>No Parameters</b></div>
+ <!-- parameters -->
+ <div class=return-value> <b>Return Value</b>
+ <div class=returnvalue>
+ <dl>
+ <dt> <code>boolean</code>
+
+ <dd> Matrix does not contain three dimensional components.<br>
+ </dl>
+ </div>
+ </div>
+
+ <div> <b>No Exceptions</b></div>
+ </div>
+ </dd>
+ <!-- isAffineTransform -->
+ <!-- ===================================================== -->
+
<dt> <code class=method-name><a id=DOM-CSSMatrix-multiply
name=DOM-CSSMatrix-multiply>multiply</a></code>
@@ -2066,8 +2138,9 @@
<dd>
<div class=method> The <code>translate</code> method returns a new
- matrix which is this matrix multiplied by a translation matrix
- containing the passed values. This matrix is not modified.
+ matrix which is this matrix post multiplied by a translation matrix
+ containing the passed values. If the z component is undefined, a 0
+ value is used in its place. This matrix is not modified.
<div class=parameters> <b>Parameters</b>
<div class=paramtable>
<dl>
@@ -2080,6 +2153,11 @@
<code>double</code>
<dd> The Y component of the translation value.<br>
+
+ <dt> <code class=parameter-name>z</code> of type
+ <code>double</code>
+
+ <dd> The (optional) Z component of the translation value.<br>
</dl>
</div>
</div>
@@ -2106,8 +2184,9 @@
<dd>
<div class=method> The <code>scale</code> method returns a new matrix
- which is this matrix multiplied by a scale matrix containing the
- passed values. If the y component is undefined, the x component
+ which is this matrix post multiplied by a scale matrix containing
+ the passed values. If the z component is undefined, a 1 value is
+ used in its place. If the y component is undefined, the x component
value is used in its place. This matrix is not modified.
<div class=parameters> <b>Parameters</b>
<div class=paramtable>
@@ -2121,6 +2200,11 @@
<code>double</code>
<dd> The (optional) Y component of the scale value.<br>
+
+ <dt> <code class=parameter-name>scaleZ</code> of type
+ <code>double</code>
+
+ <dd> The (optional) Z component of the scale value.<br>
</dl>
</div>
</div>
@@ -2147,17 +2231,29 @@
<dd>
<div class=method> The <code>rotate</code> method returns a new
- matrix which is this matrix multiplied by a <a
- href="http://www.w3.org/TR/SVG/coords.html#RotationDefined">rotation
- matrix</a>. The rotation value is in degrees. This matrix is not
- modified.
+ matrix which is this matrix post multiplied by each of 3 rotation
+ matrices about the major axes, first X, then Y, then Z. If the y and
+ z components are undefined, the x value is used to rotate the object
+ about the z axis, as though the vector (0,0,x) were passed. All
+ rotation values are in degrees. This matrix is not modified.
<div class=parameters> <b>Parameters</b>
<div class=paramtable>
<dl>
- <dt> <code class=parameter-name>angle</code> of type
+ <dt> <code class=parameter-name>rotX</code> of type
<code>double</code>
- <dd> The angle of rotation.<br>
+ <dd> The X component of the rotation value, or the Z component if
+ the rotY and rotZ parameters are undefined.<br>
+
+ <dt> <code class=parameter-name>rotY</code> of type
+ <code>double</code>
+
+ <dd> The (optional) Y component of the rotation value.<br>
+
+ <dt> <code class=parameter-name>rotZ</code> of type
+ <code>double</code>
+
+ <dd> The (optional) Z component of the rotation value.<br>
</dl>
</div>
</div>
@@ -2179,15 +2275,66 @@
<!-- rotate() -->
<!-- ===================================================== -->
+ <dt> <code class=method-name><a id=DOM-CSSMatrix-rotateAxisAngle
+ name=DOM-CSSMatrix-rotateAxisAngle>rotateAxisAngle</a></code>
+
+ <dd>
+ <div class=method> The <code>rotateAxisAngle</code> method returns a
+ new matrix which is this matrix post multiplied by a rotation matrix
+ with the given axis and angle. The <a
+ href="http://en.wikipedia.org/wiki/Right-hand_rule">right-hand
+ rule</a> is used to determine the direction of rotation. All
+ rotation values are in degrees. This matrix is not modified.
+ <div class=parameters> <b>Parameters</b>
+ <div class=paramtable>
+ <dl>
+ <dt> <code class=parameter-name>x</code> of type
+ <code>double</code>
+
+ <dd> The X component of the axis vector.<br>
+
+ <dt> <code class=parameter-name>y</code> of type
+ <code>double</code>
+
+ <dd> The Y component of the axis vector.<br>
+
+ <dt> <code class=parameter-name>z</code> of type
+ <code>double</code>
+
+ <dd> The Z component of the axis vector.<br>
+
+ <dt> <code class=parameter-name>angle</code> of type
+ <code>double</code>
+
+ <dd> The angle of rotation about the axis vector, in degrees.<br>
+ </dl>
+ </div>
+ </div>
+ <!-- parameters -->
+ <div class=return-value> <b>Return Value</b>
+ <div class=returnvalue>
+ <dl>
+ <dt> <code>CSSMatrix</code>
+
+ <dd> The result matrix.<br>
+ </dl>
+ </div>
+ </div>
+
+ <div> <b>No Exceptions</b></div>
+ </div>
+ </dd>
+ <!-- rotateAxisAngle -->
+ <!-- ===================================================== -->
+
<dt> <code class=method-name><a id=DOM-CSSMatrix-skew-x
name=DOM-CSSMatrix-skew-x>skewX</a></code>
<dd>
<div class=method> The <code>skewX</code> method returns a new matrix
which is this matrix multiplied by a matrix representing a <a
- href="http://www.w3.org/TR/SVG/coords.html#SkewXDefined">skew along
- the x-axis</a>. The rotation value is in degrees. This matrix is not
- modified.
+ href="#SkewDefined">skew along the x-axis</a>. The rotation value is
+ in degrees. This matrix is not modified.
<div class=parameters> <b>Parameters</b>
<div class=paramtable>
<dl>
@@ -2222,9 +2369,8 @@
<dd>
<div class=method> The <code>skewX</code> method returns a new matrix
which is this matrix multiplied by a matrix representing a <a
- href="http://www.w3.org/TR/SVG/coords.html#SkewYDefined">skew along
- the y-axis</a>. The rotation value is in degrees. This matrix is not
- modified.
+ href="#SkewDefined">skew along the y-axis</a>. The rotation value is
+ in degrees. This matrix is not modified.
<div class=parameters> <b>Parameters</b>
<div class=paramtable>
<dl>
@@ -2258,6 +2404,121 @@
<!-- Interface CSSMatrix -->
</dl>
+ <h3 id=csstransformvalue-interface><span class=secno>17.2. </span>
+ CSSTransformValue</h3>
+
+ <dl>
+ <dt> <b>Interface <i><a id=DOM-CSSTransformValue
+ name=DOM-CSSTransformValue>CSSTransformValue</a></i></b>
+
+ <dd>
+ <p> The <code>CSSTransformValue</code> interface represents one transform
+ function in the transform property. The <code>operationType</code>
+ defines which operation is represented. The object also contains a list
+ of values, which are the parameters of the function, in the same order
+ in which they appear in the transform functions.</p>
+
+ <dl>
+ <dt> <b>IDL Definition</b>
+
+ <dd>
+ <div class=idl-code>
+ <pre>
+ interface CSSTransformValue : CSSValueList {
+
+ // 2D OperationTypes
+ const unsigned short CSS_TRANSLATE = 1;
+ const unsigned short CSS_TRANSLATEX = 2;
+ const unsigned short CSS_TRANSLATEY = 3;
+ const unsigned short CSS_ROTATE = 4;
+ const unsigned short CSS_SCALE = 5;
+ const unsigned short CSS_SCALEX = 6;
+ const unsigned short CSS_SCALEY = 7;
+ const unsigned short CSS_SKEW = 8;
+ const unsigned short CSS_SKEWX = 9;
+ const unsigned short CSS_SKEWY = 10;
+ const unsigned short CSS_MATRIX = 11;
+
+ // 3D OperationTypes
+ const unsigned short CSS_TRANSLATEZ = 12;
+ const unsigned short CSS_TRANSLATE3D = 13;
+ const unsigned short CSS_ROTATEX = 14;
+ const unsigned short CSS_ROTATEY = 15;
+ const unsigned short CSS_ROTATEZ = 16;
+ const unsigned short CSS_ROTATE3D = 17;
+ const unsigned short CSS_SCALEZ = 18;
+ const unsigned short CSS_SCALE3D = 19;
+ const unsigned short CSS_PERSPECTIVE = 20;
+ const unsigned short CSS_MATRIX3D = 21;
+
+ attribute unsigned short operationType;
+
+ CSSMatrix getCSSMatrix() raises(DOMException);
+ }; </pre>
+ </div>
+ </dd>
+ <!-- IDL -->
+
+ <dt> <b>Attributes</b>
+
+ <dd>
+ <dl>
+ <dt> <code class=attribute-name><a
+ id=DOM-CSSTransformValue-operationType
+ name=DOM-CSSTransformValue-operationType>operationType</a></code> of
+ type <code>unsigned short</code>
+
+ <dd> One of the listed operation types.<br>
+ </dl>
+ </dd>
+ <!-- Attributes -->
+
+ <dt> <b>Methods</b>
+
+ <dd>
+ <dl><!-- ===================================================== -->
+
+ <dt> <code class=method-name><a id=DOM-CSSTransformValue-getCSSMatrix
+ name=DOM-CSSTransformValue-getCSSMatrix>getCSSMatrix</a></code>
+
+ <dd>
+ <div class=method> The <code>getCSSMatrix</code> method returns a
+ CSSMatrix object representing this transform.
+ <div class=parameters> <b>No Parameters</b></div>
+ <!-- parameters -->
+ <div class=return-value> <b>Return Value</b>
+ <div class=returnvalue>
+ <dl>
+ <dt> <code>CSSMatrix</code>
+
+ <dd> The result matrix.
+ </dl>
+ </div>
+ </div>
+
+ <div> <b>Exceptions</b>
+ <div class=returnvalue>
+ <dl>
+ <dt> <code>NOT_SUPPORTED_ERROR</code>
+
+ <dd> Thrown when the CSSTranformValue can not be converted into a
+ CSSMatrix, such as when the CSSTransformValue contains
+ percentage units and is being called on an object with unknown
+ dimensions.
+ </dl>
+ </div>
+ </div>
+ </div>
+ </dd>
+ <!-- setMatrixValue -->
+ </dl>
+ </dd>
+ <!-- methods -->
+ </dl>
+ </dd>
+ <!-- Interface CSSTransformValue -->
+ </dl>
+
<h2 id=references><span class=secno>18. </span>References</h2>
<h3 class=no-num id=normative-references>Normative references</h3>
Index: Transforms.src.html
===================================================================
RCS file: /sources/public/csswg/css3-transforms/Transforms.src.html,v
retrieving revision 1.26
retrieving revision 1.27
diff -u -d -r1.26 -r1.27
--- Transforms.src.html 13 Feb 2012 00:12:25 -0000 1.26
+++ Transforms.src.html 13 Feb 2012 05:55:39 -0000 1.27
@@ -1503,8 +1503,7 @@
Those that can't are decomposed into the most accurate representation
possible, using the technique below. This technique is taken from the
"unmatrix" method in "Graphics Gems II, edited by Jim Arvo".
- The pseudocode below works on a 4x4 homogeneous matrix. A 3x2 2D matrix
- is therefore first converted to 4x4 homogeneous form.
+ The pseudocode below works on a 4x4 homogeneous matrix.
</p>
<h3 id="unmatrix">Unmatrix</h3>
@@ -1763,9 +1762,6 @@
</h3>
<div class="issue">
- <p class="desc">We actually describe a 3x2 matrix here, similar to <a href="http://www.w3.org/TR/SVG/coords.html#InterfaceSVGMatrix">SVGMatrix</a>.</p>
- </div>
- <div class="issue">
<p class="desc">We need to resolve how SVGMatrix and CSSMatrix work together (<a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15498">bug 15498</a>).</p>
</div>
@@ -1775,7 +1771,7 @@
</dt>
<dd>
<p>
- The <code>CSSMatrix</code> interface represents a 3x2 homogeneous matrix.
+ The <code>CSSMatrix</code> interface represents a 4x4 homogeneous matrix.
</p>
<dl>
@@ -1793,14 +1789,33 @@
attribute double e;
attribute double f;
+ attribute double m11;
+ attribute double m12;
+ attribute double m13;
+ attribute double m14;
+ attribute double m21;
+ attribute double m22;
+ attribute double m23;
+ attribute double m24;
+ attribute double m31;
+ attribute double m32;
+ attribute double m33;
+ attribute double m34;
+ attribute double m41;
+ attribute double m42;
+ attribute double m43;
+ attribute double m44;
+
void setMatrixValue(in DOMString string) raises(DOMException);
+ boolean isAffineTransform();
CSSMatrix multiply(in CSSMatrix secondMatrix);
CSSMatrix inverse() raises(DOMException);
- CSSMatrix translate(in double x, in double y);
- CSSMatrix scale(in double scaleX, in double scaleY);
+ CSSMatrix translate(in double x, in double y, optional in double z);
+ CSSMatrix scale(in double scaleX, optional in double scaleY, optional in double scaleZ);
+ CSSMatrix rotate(in double rotX, optional in double rotY, optional in double rotZ);
+ CSSMatrix rotateAxisAngle(in double x, in double y, in double z, in double angle);
CSSMatrix skewX(in double angle);
CSSMatrix skewY(in double angle);
- CSSMatrix rotate(in double angle);
};</pre>
</div><br>
</dd> <!-- IDL -->
@@ -1811,10 +1826,46 @@
<dd>
<dl>
<dt>
- <code class='attribute-name'><a id="DOM-CSSMatrix-matrix" name='DOM-CSSMatrix-matrix'>a-f</a></code> of type <code>double</code>
+ <code class='attribute-name'>a</code> of type <code>double</code>
</dt>
<dd>
- Each of these attributes represents one of the values in the 3x2 matrix.<br>
+ Points to the value of attribute <code>m11</code> in the 4x4 matrix.<br>
+ </dd>
+ <dt>
+ <code class='attribute-name'>b</code> of type <code>double</code>
+ </dt>
+ <dd>
+ Points to the value of attribute <code>m12</code> in the 4x4 matrix.<br>
+ </dd>
+ <dt>
+ <code class='attribute-name'>c</code> of type <code>double</code>
+ </dt>
+ <dd>
+ Points to the value of attribute <code>m21</code> in the 4x4 matrix.<br>
+ </dd>
+ <dt>
+ <code class='attribute-name'>d</code> of type <code>double</code>
+ </dt>
+ <dd>
+ Points to the value of attribute <code>m22</code> in the 4x4 matrix.<br>
+ </dd>
+ <dt>
+ <code class='attribute-name'>e</code> of type <code>double</code>
+ </dt>
+ <dd>
+ Points to the value of attribute <code>m41</code> in the 4x4 matrix.<br>
+ </dd>
+ <dt>
+ <code class='attribute-name'>f</code> of type <code>double</code>
+ </dt>
+ <dd>
+ Points to the value of attribute <code>m42</code> in the 4x4 matrix.<br>
+ </dd>
+ <dt>
+ <code class='attribute-name'>m11-m44</code> of type <code>double</code>
+ </dt>
+ <dd>
+ Each of these attributes represents one of the values in the 4x4 matrix.<br>
</dd>
</dl>
</dd> <!-- Attributes -->
@@ -1865,6 +1916,36 @@
</div>
</div>
</dd> <!-- setMatrixValue -->
+
+ <!-- ===================================================== -->
+ <dt>
+ <code class='method-name'><a id="DOM-CSSMatrix-isAffineTransform" name='DOM-CSSMatrix-isAffineTransform'>isAffineTransform</a></code>
+ </dt>
+ <dd>
+ <div class='method'>
+ The <code>isAffineTransform</code> returns true, if the matrix does not contain three dimensional components. Therefore if
+ m13 = m14 = m23 = m24 = m31 = m32 = m34 = m43 = 0 and m33 = m44 = 1.
+ <div class='parameters'>
+ <b>No Parameters</b>
+ </div><!-- parameters -->
+ <div class='return-value'>
+ <b>Return Value</b>
+ <div class='returnvalue'>
+ <dl>
+ <dt>
+ <code>boolean</code>
+ </dt>
+ <dd>
+ Matrix does not contain three dimensional components.<br>
+ </dd>
+ </dl>
+ </div>
+ </div>
+ <div>
+ <b>No Exceptions</b>
+ </div>
+ </div>
+ </dd> <!-- isAffineTransform -->
<!-- ===================================================== -->
<dt>
@@ -1951,7 +2032,7 @@
</dt>
<dd>
<div class='method'>
- The <code>translate</code> method returns a new matrix which is this matrix multiplied by a translation matrix containing the passed values. This matrix is not modified.
+ The <code>translate</code> method returns a new matrix which is this matrix post multiplied by a translation matrix containing the passed values. If the z component is undefined, a 0 value is used in its place. This matrix is not modified.
<div class='parameters'>
<b>Parameters</b>
<div class='paramtable'>
@@ -1968,6 +2049,12 @@
<dd>
The Y component of the translation value.<br>
</dd>
+ <dt>
+ <code class='parameter-name'>z</code> of type <code>double</code>
+ </dt>
+ <dd>
+ The (optional) Z component of the translation value.<br>
+ </dd>
</dl>
</div>
</div><!-- parameters -->
@@ -1996,7 +2083,7 @@
</dt>
<dd>
<div class='method'>
- The <code>scale</code> method returns a new matrix which is this matrix multiplied by a scale matrix containing the passed values. If the y component is undefined, the x component value is used in its place. This matrix is not modified.
+ The <code>scale</code> method returns a new matrix which is this matrix post multiplied by a scale matrix containing the passed values. If the z component is undefined, a 1 value is used in its place. If the y component is undefined, the x component value is used in its place. This matrix is not modified.
<div class='parameters'>
<b>Parameters</b>
<div class='paramtable'>
@@ -2013,6 +2100,12 @@
<dd>
The (optional) Y component of the scale value.<br>
</dd>
+ <dt>
+ <code class='parameter-name'>scaleZ</code> of type <code>double</code>
+ </dt>
+ <dd>
+ The (optional) Z component of the scale value.<br>
+ </dd>
</dl>
</div>
</div><!-- parameters -->
@@ -2041,16 +2134,28 @@
</dt>
<dd>
<div class='method'>
- The <code>rotate</code> method returns a new matrix which is this matrix multiplied by a <a href="http://www.w3.org/TR/SVG/coords.html#RotationDefined">rotation matrix</a>. The rotation value is in degrees. This matrix is not modified.
+ The <code>rotate</code> method returns a new matrix which is this matrix post multiplied by each of 3 rotation matrices about the major axes, first X, then Y, then Z. If the y and z components are undefined, the x value is used to rotate the object about the z axis, as though the vector (0,0,x) were passed. All rotation values are in degrees. This matrix is not modified.
<div class='parameters'>
<b>Parameters</b>
<div class='paramtable'>
<dl>
<dt>
- <code class='parameter-name'>angle</code> of type <code>double</code>
+ <code class='parameter-name'>rotX</code> of type <code>double</code>
</dt>
<dd>
- The angle of rotation.<br>
+ The X component of the rotation value, or the Z component if the rotY and rotZ parameters are undefined.<br>
+ </dd>
+ <dt>
+ <code class='parameter-name'>rotY</code> of type <code>double</code>
+ </dt>
+ <dd>
+ The (optional) Y component of the rotation value.<br>
+ </dd>
+ <dt>
+ <code class='parameter-name'>rotZ</code> of type <code>double</code>
+ </dt>
+ <dd>
+ The (optional) Z component of the rotation value.<br>
</dd>
</dl>
</div>
@@ -2077,11 +2182,68 @@
<!-- ===================================================== -->
<dt>
+ <code class='method-name'><a id="DOM-CSSMatrix-rotateAxisAngle" name='DOM-CSSMatrix-rotateAxisAngle'>rotateAxisAngle</a></code>
+ </dt>
+ <dd>
+ <div class='method'>
+ The <code>rotateAxisAngle</code> method returns a new matrix which is this matrix post multiplied by a rotation matrix with the given axis and angle. The <a href="http://en.wikipedia.org/wiki/Right-hand_rule">right-hand rule</a> is used to determine the direction of rotation. All rotation values are in degrees. This matrix is not modified.
+ <div class='parameters'>
+ <b>Parameters</b>
+ <div class='paramtable'>
+ <dl>
+ <dt>
+ <code class='parameter-name'>x</code> of type <code>double</code>
+ </dt>
+ <dd>
+ The X component of the axis vector.<br>
+ </dd>
+ <dt>
+ <code class='parameter-name'>y</code> of type <code>double</code>
+ </dt>
+ <dd>
+ The Y component of the axis vector.<br>
+ </dd>
+ <dt>
+ <code class='parameter-name'>z</code> of type <code>double</code>
+ </dt>
+ <dd>
+ The Z component of the axis vector.<br>
+ </dd>
+ <dt>
+ <code class='parameter-name'>angle</code> of type <code>double</code>
+ </dt>
+ <dd>
+ The angle of rotation about the axis vector, in degrees.<br>
+ </dd>
+ </dl>
+ </div>
+ </div><!-- parameters -->
+ <div class='return-value'>
+ <b>Return Value</b>
+ <div class='returnvalue'>
+ <dl>
+ <dt>
+ <code>CSSMatrix</code>
+ </dt>
+ <dd>
+ The result matrix.<br>
+ </dd>
+ </dl>
+ </div>
+ </div>
+ <div>
+ <b>No Exceptions</b>
+ </div>
+ </div>
+ </dd> <!-- rotateAxisAngle -->
+
+ <!-- ===================================================== -->
+ <dt>
<code class='method-name'><a id="DOM-CSSMatrix-skew-x" name='DOM-CSSMatrix-skew-x'>skewX</a></code>
</dt>
<dd>
<div class='method'>
- The <code>skewX</code> method returns a new matrix which is this matrix multiplied by a matrix representing a <a href="http://www.w3.org/TR/SVG/coords.html#SkewXDefined">skew along the x-axis</a>. The rotation value is in degrees. This matrix is not modified.
+ The <code>skewX</code> method returns a new matrix which is this matrix multiplied by a matrix representing a <a href="#SkewDefined">skew along the x-axis</a>. The rotation value is in degrees. This matrix is not modified.
<div class='parameters'>
<b>Parameters</b>
<div class='paramtable'>
@@ -2121,7 +2283,7 @@
</dt>
<dd>
<div class='method'>
- The <code>skewX</code> method returns a new matrix which is this matrix multiplied by a matrix representing a <a href="http://www.w3.org/TR/SVG/coords.html#SkewYDefined">skew along the y-axis</a>. The rotation value is in degrees. This matrix is not modified.
+ The <code>skewX</code> method returns a new matrix which is this matrix multiplied by a matrix representing a <a href="#SkewDefined">skew along the y-axis</a>. The rotation value is in degrees. This matrix is not modified.
<div class='parameters'>
<b>Parameters</b>
<div class='paramtable'>
@@ -2161,6 +2323,127 @@
</dl>
</dd> <!-- Interface CSSMatrix -->
</dl>
+
+ <h3 id="csstransformvalue-interface">
+ CSSTransformValue
+ </h3>
+
+ <dl>
+ <dt>
+ <b>Interface <i><a id="DOM-CSSTransformValue" name='DOM-CSSTransformValue'>CSSTransformValue</a></i></b>
+ </dt>
+ <dd>
+ <p>
+ The <code>CSSTransformValue</code> interface represents one transform function in the transform property. The
+ <code>operationType</code> defines which operation is represented. The object also contains a list of values,
+ which are the parameters of the function, in the same order in which they appear in the transform functions.
+ </p>
+ <dl>
+ <dt>
+ <b>IDL Definition</b>
+ </dt>
+ <dd>
+ <div class='idl-code'>
+ <pre>
+ interface CSSTransformValue : CSSValueList {
+
+ // 2D OperationTypes
+ const unsigned short CSS_TRANSLATE = 1;
+ const unsigned short CSS_TRANSLATEX = 2;
+ const unsigned short CSS_TRANSLATEY = 3;
+ const unsigned short CSS_ROTATE = 4;
+ const unsigned short CSS_SCALE = 5;
+ const unsigned short CSS_SCALEX = 6;
+ const unsigned short CSS_SCALEY = 7;
+ const unsigned short CSS_SKEW = 8;
+ const unsigned short CSS_SKEWX = 9;
+ const unsigned short CSS_SKEWY = 10;
+ const unsigned short CSS_MATRIX = 11;
+
+ // 3D OperationTypes
+ const unsigned short CSS_TRANSLATEZ = 12;
+ const unsigned short CSS_TRANSLATE3D = 13;
+ const unsigned short CSS_ROTATEX = 14;
+ const unsigned short CSS_ROTATEY = 15;
+ const unsigned short CSS_ROTATEZ = 16;
+ const unsigned short CSS_ROTATE3D = 17;
+ const unsigned short CSS_SCALEZ = 18;
+ const unsigned short CSS_SCALE3D = 19;
+ const unsigned short CSS_PERSPECTIVE = 20;
+ const unsigned short CSS_MATRIX3D = 21;
+
+ attribute unsigned short operationType;
+
+ CSSMatrix getCSSMatrix() raises(DOMException);
+ }; </pre>
+ </div>
+ </dd> <!-- IDL -->
+
+ <dt>
+ <b>Attributes</b>
+ </dt>
+ <dd>
+ <dl>
+ <dt>
+ <code class='attribute-name'><a id="DOM-CSSTransformValue-operationType" name='DOM-CSSTransformValue-operationType'>operationType</a></code> of type <code>unsigned short</code>
+ </dt>
+ <dd>
+ One of the listed operation types.<br>
+ </dd>
+ </dl>
+ </dd> <!-- Attributes -->
+
+ <dt>
+ <b>Methods</b>
+ </dt>
+ <dd>
+ <dl>
+
+ <!-- ===================================================== -->
+ <dt>
+ <code class='method-name'><a id="DOM-CSSTransformValue-getCSSMatrix" name='DOM-CSSTransformValue-getCSSMatrix'>getCSSMatrix</a></code>
+ </dt>
+ <dd>
+ <div class='method'>
+ The <code>getCSSMatrix</code> method returns
+ a CSSMatrix object representing this transform.
+ <div class='parameters'>
+ <b>No Parameters</b>
+ </div><!-- parameters -->
+ <div class='return-value'>
+ <b>Return Value</b>
+ <div class='returnvalue'>
+ <dl>
+ <dt>
+ <code>CSSMatrix</code>
+ </dt>
+ <dd>
+ The result matrix.
+ </dd>
+ </dl>
+ </div>
+ </div>
+ <div>
+ <b>Exceptions</b>
+ <div class='returnvalue'>
+ <dl>
+ <dt>
+ <code>NOT_SUPPORTED_ERROR</code>
+ </dt>
+ <dd>
+ Thrown when the CSSTranformValue can not be converted into a CSSMatrix, such as when the CSSTransformValue contains percentage units and is being called on an object with unknown dimensions.
+ </dd>
+ </dl>
+ </div>
+ </div>
+ </div>
+ </dd> <!-- setMatrixValue -->
+ </dl>
+ </dd> <!-- methods -->
+
+ </dl>
+ </dd> <!-- Interface CSSTransformValue -->
+ </dl>
<h2>References</h2>
Received on Monday, 13 February 2012 05:55:44 UTC