- From: Simon Fraser via cvs-syncmail <cvsmail@w3.org>
- Date: Wed, 22 Feb 2012 18:00:12 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-transforms In directory hutz:/tmp/cvs-serv3234 Modified Files: ChangeLog Overview.html Transforms.src.html Log Message: 2012-02-22 simon.fraser@apple.com Add Issues list section with a link to bugzilla. Remove the DOM Interfaces section. Add Aryeh Gregor as an editor. Index: ChangeLog =================================================================== RCS file: /sources/public/csswg/css3-transforms/ChangeLog,v retrieving revision 1.16 retrieving revision 1.17 diff -u -d -r1.16 -r1.17 --- ChangeLog 21 Feb 2012 19:11:03 -0000 1.16 +++ ChangeLog 22 Feb 2012 18:00:10 -0000 1.17 @@ -1,4 +1,9 @@ -2012-02-07 simon.fraser@apple.com +2012-02-22 simon.fraser@apple.com + Add Issues list section with a link to bugzilla. + Remove the DOM Interfaces section. + Add Aryeh Gregor as an editor. + +2012-02-21 simon.fraser@apple.com Add a link to #perspective-function 2012-02-13 dschulze@adobe.com Index: Overview.html =================================================================== RCS file: /sources/public/csswg/css3-transforms/Overview.html,v retrieving revision 1.26 retrieving revision 1.27 diff -u -d -r1.26 -r1.27 --- Overview.html 21 Feb 2012 19:11:03 -0000 1.26 +++ Overview.html 22 Feb 2012 18:00:10 -0000 1.27 @@ -36,15 +36,15 @@ <h1>CSS Transforms</h1> - <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 21 February + <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 22 February 2012</h2> <dl> <dt>This version: <dd> <a - href="http://www.w3.org/TR/2012/ED-css3-transforms-20120221/">http://dev.w3.org/csswg/css3-transforms/</a> - <!--http://www.w3.org/TR/2012/WD-css3-transforms-20120221--> + href="http://www.w3.org/TR/2012/ED-css3-transforms-20120222/">http://dev.w3.org/csswg/css3-transforms/</a> + <!--http://www.w3.org/TR/2012/WD-css3-transforms-20120222--> <dt>Latest version: @@ -52,6 +52,10 @@ href="http://www.w3.org/TR/css3-transforms">http://www.w3.org/TR/css3-transforms/</a> + <dt>Editor's Draft: + + <dd><a href="http://dev.w3.org/csswg/css3-transforms/"></a> + <dt>Previous version: <dd>None @@ -75,6 +79,19 @@ <dd>Dirk Schulze (<a href="http://www.adobe.com/">Adobe Systems, Inc</a>) <dschulze @adobe.com> + + <dd>Aryeh Gregor (<a href="http://www.mozilla.org/">Mozilla</a>) <ayg + @aryeh.name> + + <dt>Issues list: + + <dd><a + href="https://www.w3.org/Bugs/Public/buglist.cgi?query_format=advanced&product=CSS&component=Transforms&resolution=---&cmdtype=doit">in + Bugzilla</a> + + <dt>Test suite: + + <dd>none yet </dl> <!--begin-copyright--> <p class=copyright><a @@ -230,17 +247,7 @@ <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>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> + <li><a href="#references"><span class=secno>17. </span>References</a> <ul class=toc> <li class=no-num><a href="#normative-references">Normative references</a> @@ -1888,640 +1895,7 @@ 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>17.1. </span> CSSMatrix</h3> - - <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> - - <dl> - <dt> <b>Interface <i><a id=DOM-CSSMatrix - name=DOM-CSSMatrix>CSSMatrix</a></i></b> - - <dd> - <p> The <code>CSSMatrix</code> interface represents a 4x4 homogeneous - matrix.</p> - - <dl> - <dt> <b>IDL Definition</b> - - <dd> - <div class=idl-code> - <pre> - interface CSSMatrix { - attribute double a; - attribute double b; - attribute double c; - attribute double d; - 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, 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); - };</pre> - </div> - <br> - </dd> - <!-- IDL --> - - <dt> <b>Attributes</b> - - <dd> - <dl> - <dt> <code class=attribute-name>a</code> of type <code>double</code> - - <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> - <!-- Attributes --> - - <dt> <b>Methods</b> - - <dd> - <dl><!-- ===================================================== --> - - <dt> <code class=method-name><a id=DOM-CSSMatrix-setMatrixValue - name=DOM-CSSMatrix-setMatrixValue>setMatrixValue</a></code> - - <dd> - <div class=method> The <code>setMatrixValue</code> method replaces - the existing matrix with one computed from parsing the passed string - as though it had been assigned to the transform property in a CSS - style rule. - <div class=parameters> <b>Parameters</b> - <div class=paramtable> - <dl> - <dt> <code class=parameter-name>string</code> of type - <code>DOMString</code> - - <dd> The string to parse.<br> - </dl> - </div> - </div> - <!-- parameters --> - <div class=return-value> <b>No Return Value</b></div> - - <div> <b>Exceptions</b> - <div class=returnvalue> - <dl> - <dt> <code>DOMException SYNTAX_ERR</code> - - <dd> Thrown when the provided string can not be parsed into a - CSSMatrix. - </dl> - </div> - </div> - </div> - </dd> - <!-- 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> - - <dd> - <div class=method> The <code>multiply</code> method returns a new - CSSMatrix which is the result of this matrix multiplied by the - passed matrix, with the passed matrix to the right. This matrix is - not modified. - <div class=parameters> <b>Parameters</b> - <div class=paramtable> - <dl> - <dt> <code class=parameter-name>secondMatrix</code> of type - <code>CSSMatrix</code> - - <dd> The matrix to multiply.<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> - <!-- multiply() --> - <!-- ===================================================== --> - - <dt> <code class=method-name><a id=DOM-CSSMatrix-inverse - name=DOM-CSSMatrix-inverse>inverse</a></code> - - <dd> - <div class=method> The <code>inverse</code> method returns a new - matrix which is the inverse of this matrix. This matrix is not - modified. - <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 inverted matrix.<br> - </dl> - </div> - </div> - - <div> <b>Exceptions</b> - <div class=returnvalue> - <dl> - <dt> <code>DOMException NOT_SUPPORTED_ERR</code> - - <dd> Thrown when the CSSMatrix can not be inverted. - </dl> - </div> - </div> - </div> - <!-- ======================================================================================================= --> - </dd> - <!-- inverse() --> - <!-- ===================================================== --> - - <dt> <code class=method-name><a id=DOM-CSSMatrix-translate - name=DOM-CSSMatrix-translate>translate</a></code> - - <dd> - <div class=method> 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> - <dl> - <dt> <code class=parameter-name>x</code> of type - <code>double</code> - - <dd> The X component of the translation value.<br> - - <dt> <code class=parameter-name>y</code> of type - <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> - <!-- 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> - <!-- translate() --> - <!-- ===================================================== --> - - <dt> <code class=method-name><a id=DOM-CSSMatrix-scale - name=DOM-CSSMatrix-scale>scale</a></code> - - <dd> - <div class=method> 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> - <dl> - <dt> <code class=parameter-name>scaleX</code> of type - <code>double</code> - - <dd> The X component of the scale value.<br> - - <dt> <code class=parameter-name>scaleY</code> of type - <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> - <!-- 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> - <!-- scale() --> - <!-- ===================================================== --> - - <dt> <code class=method-name><a id=DOM-CSSMatrix-rotate - name=DOM-CSSMatrix-rotate>rotate</a></code> - - <dd> - <div class=method> 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>rotX</code> of type - <code>double</code> - - <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> - <!-- 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> - <!-- 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="#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> - <dt> <code class=parameter-name>angle</code> of type - <code>double</code> - - <dd> The angle of skew along the X axis.<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> - <!-- skewX() --> - <!-- ===================================================== --> - - <dt> <code class=method-name><a id=DOM-CSSMatrix-skew-y - name=DOM-CSSMatrix-skew-y>skewY</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="#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> - <dt> <code class=parameter-name>angle</code> of type - <code>double</code> - - <dd> The angle of skew along the Y axis.<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> - <!-- skewY() --> - </dl> - <!-- methods --> - </dl> - </dd> - <!-- 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> + <h2 id=references><span class=secno>17. </span>References</h2> <h3 class=no-num id=normative-references>Normative references</h3> <!--begin-normative--> Index: Transforms.src.html =================================================================== RCS file: /sources/public/csswg/css3-transforms/Transforms.src.html,v retrieving revision 1.29 retrieving revision 1.30 diff -u -d -r1.29 -r1.30 --- Transforms.src.html 21 Feb 2012 19:11:03 -0000 1.29 +++ Transforms.src.html 22 Feb 2012 18:00:10 -0000 1.30 @@ -50,7 +50,14 @@ <dd>Chris Marrin (<a href="http://www.apple.com/">Apple Inc</a>) <cmarrin @apple.com> <dd>Edward O'Connor (<a href="http://www.apple.com/">Apple Inc</a>) <eoconnor @apple.com> <dd>Dirk Schulze (<a href="http://www.adobe.com/">Adobe Systems, Inc</a>) <dschulze @adobe.com> - </dl> + <dd>Aryeh Gregor (<a href="http://www.mozilla.org/">Mozilla</a>) <ayg @aryeh.name> + + <dt>Issues list: + <dd><a href="https://www.w3.org/Bugs/Public/buglist.cgi?query_format=advanced&product=CSS&component=Transforms&resolution=---&cmdtype=doit">in Bugzilla</a> + + <dt>Test suite: + <dd>none yet + </dl> <!--copyright--> @@ -1746,701 +1753,6 @@ </li> </ul> - <h2 id="dom-interfaces"> - DOM Interfaces - </h2> - <p> - This section describes the interfaces and functionality added to the DOM - to support runtime access to the functionality described above. - </p> - - <h3 id="cssmatrix-interface"> - CSSMatrix - </h3> - - <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> - - <dl> - <dt> - <b>Interface <i><a id="DOM-CSSMatrix" name='DOM-CSSMatrix'>CSSMatrix</a></i></b> - </dt> - <dd> - <p> - The <code>CSSMatrix</code> interface represents a 4x4 homogeneous matrix. - </p> - <dl> - - <dt> - <b>IDL Definition</b> - </dt> - <dd> - <div class='idl-code'> - <pre> - interface CSSMatrix { - attribute double a; - attribute double b; - attribute double c; - attribute double d; - 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, 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); - };</pre> - </div><br> - </dd> <!-- IDL --> - - <dt> - <b>Attributes</b> - </dt> - <dd> - <dl> - <dt> - <code class='attribute-name'>a</code> of type <code>double</code> - </dt> - <dd> - 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 --> - - <dt> - <b>Methods</b> - </dt> - <dd> - <dl> - - <!-- ===================================================== --> - <dt> - <code class='method-name'><a id="DOM-CSSMatrix-setMatrixValue" name='DOM-CSSMatrix-setMatrixValue'>setMatrixValue</a></code> - </dt> - <dd> - <div class='method'> - The <code>setMatrixValue</code> method replaces the existing matrix with one computed from parsing the passed string - as though it had been assigned to the transform property in a CSS style rule. - <div class='parameters'> - <b>Parameters</b> - <div class='paramtable'> - <dl> - <dt> - <code class='parameter-name'>string</code> of type <code>DOMString</code> - </dt> - <dd> - The string to parse.<br> - </dd> - </dl> - </div> - </div><!-- parameters --> - <div class='return-value'> - <b>No Return Value</b> - </div> - <div> - <b>Exceptions</b> - <div class='returnvalue'> - <dl> - <dt> - <code>DOMException SYNTAX_ERR</code> - </dt> - <dd> - Thrown when the provided string can not be - parsed into a CSSMatrix. - </dd> - </dl> - </div> - </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> - <code class='method-name'><a id="DOM-CSSMatrix-multiply" name='DOM-CSSMatrix-multiply'>multiply</a></code> - </dt> - <dd> - <div class='method'> - The <code>multiply</code> method returns a new CSSMatrix which is the result of this matrix multiplied by the passed matrix, with the passed matrix to the right. This matrix is not modified. - <div class='parameters'> - <b>Parameters</b> - <div class='paramtable'> - <dl> - <dt> - <code class='parameter-name'>secondMatrix</code> of type <code>CSSMatrix</code> - </dt> - <dd> - The matrix to multiply.<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> <!-- multiply() --> - - <!-- ===================================================== --> - <dt> - <code class='method-name'><a id="DOM-CSSMatrix-inverse" name='DOM-CSSMatrix-inverse'>inverse</a></code> - </dt> - <dd> - <div class='method'> - The <code>inverse</code> method returns a new matrix which is the inverse of this matrix. This matrix is not modified. - <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 inverted matrix.<br> - </dd> - </dl> - </div> - </div> - <div> - <b>Exceptions</b> - <div class='returnvalue'> - <dl> - <dt> - <code>DOMException NOT_SUPPORTED_ERR</code> - </dt> - <dd> - Thrown when the CSSMatrix can not be - inverted. - </dd> - </dl> - </div> - </div> - </div><!-- ======================================================================================================= --> - </dd> <!-- inverse() --> - - <!-- ===================================================== --> - <dt> - <code class='method-name'><a id="DOM-CSSMatrix-translate" name='DOM-CSSMatrix-translate'>translate</a></code> - </dt> - <dd> - <div class='method'> - 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'> - <dl> - <dt> - <code class='parameter-name'>x</code> of type <code>double</code> - </dt> - <dd> - The X component of the translation value.<br> - </dd> - <dt> - <code class='parameter-name'>y</code> of type <code>double</code> - </dt> - <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 --> - <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> <!-- translate() --> - - <!-- ===================================================== --> - <dt> - <code class='method-name'><a id="DOM-CSSMatrix-scale" name='DOM-CSSMatrix-scale'>scale</a></code> - </dt> - <dd> - <div class='method'> - 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'> - <dl> - <dt> - <code class='parameter-name'>scaleX</code> of type <code>double</code> - </dt> - <dd> - The X component of the scale value.<br> - </dd> - <dt> - <code class='parameter-name'>scaleY</code> of type <code>double</code> - </dt> - <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 --> - <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> <!-- scale() --> - - <!-- ===================================================== --> - <dt> - <code class='method-name'><a id="DOM-CSSMatrix-rotate" name='DOM-CSSMatrix-rotate'>rotate</a></code> - </dt> - <dd> - <div class='method'> - 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'>rotX</code> of type <code>double</code> - </dt> - <dd> - 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> - </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> <!-- rotate() --> - - <!-- ===================================================== --> - <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="#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> - <dt> - <code class='parameter-name'>angle</code> of type <code>double</code> - </dt> - <dd> - The angle of skew along the X axis.<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> <!-- skewX() --> - - <!-- ===================================================== --> - <dt> - <code class='method-name'><a id="DOM-CSSMatrix-skew-y" name='DOM-CSSMatrix-skew-y'>skewY</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="#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> - <dt> - <code class='parameter-name'>angle</code> of type <code>double</code> - </dt> - <dd> - The angle of skew along the Y axis.<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> <!-- skewY() --> - - </dl><!-- methods --> - </dd> - - </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 Wednesday, 22 February 2012 18:00:18 UTC