Revision 678437 of DOMMatrixReadOnly

<p>{{APIRef}}{{SeeCompatTable}}</p>
<p>The <code><strong>DOMMatrixReadOnly</strong></code> interface represents 4x4 matrices, suitable for 2D and 3D operations. If this interface defines only read-only matrices, the {{domxref("DOMMatrix")}} interface which inherits from it, add all the properties and the methods to allow to have modifiable matrices.</p>
<p>A 4x4 matrix is suitable to describe any rotation and translation in 3D.</p>
<p>This interface should be available inside Web workers, though some implementations doesn't allow it yet.</p>
<h2 id="Properties">Properties</h2>
<p><em>This interface doesn't inherit any other property.</em></p>
<dl>
 <dt>
  <code>m11</code>, <code>m12</code>, <code>m13</code>, <code>m14</code>, <code>m21</code>, <code>m22</code>, <code>m23</code>, <code>m2<code>4</code></code>, <code><code>m31</code></code>, <code><code>m32</code></code>, <code><code>m33</code></code>, <code><code>m34</code></code>, <code><code>m41</code></code>, <code><code>m42</code></code>, <code><code>m43</code></code>, <code><code>m44</code></code> {{ReadonlyInline}}</dt>
 <dd>
  Are <code>double</code> representing each component of a 4x4 matrix. They are read-only, but their counterpart, with the same name, in {{domxref("DOMMatrix")}} aren't.</dd>
 <dt>
  <code>a</code>, <code>b</code>, <code>c</code>, <code>d</code>, <code>e</code>, <code>f</code> {{ReadOnlyInline}}</dt>
 <dd>
  Are <code>double</code> representing each component of a 4x4 matrix needed for 2D rotations and translations. They are aliases for some components of the 4x4 matrix:
  <table class="standard-table">
   <thead>
    <tr>
     <th scope="col">2D</th>
     <th scope="col">3D equivalent</th>
    </tr>
   </thead>
   <tbody>
    <tr>
     <td><code>a</code></td>
     <td><code>m11</code></td>
    </tr>
    <tr>
     <td><code>b</code></td>
     <td><code>m12</code></td>
    </tr>
    <tr>
     <td><code>c</code></td>
     <td><code>m21</code></td>
    </tr>
    <tr>
     <td><code>d</code></td>
     <td><code>m22</code></td>
    </tr>
    <tr>
     <td><code>e</code></td>
     <td><code>m41</code></td>
    </tr>
    <tr>
     <td><code>f</code></td>
     <td><code>m42</code></td>
    </tr>
   </tbody>
  </table>
  They are read-only, but their counterpart, with the same name, in {{domxref("DOMMatrix")}} aren't.</dd>
 <dt>
  {{domxref("DOMMatrixReadOnly.is2D")}} {{ReadOnlyInline}}</dt>
 <dd>
  Is a {{jsxref("Boolean")}} indicating if the matrix contains a 2D matrix and only accept 2D transformations.</dd>
 <dt>
  {{domxref("DOMMatrixReadOnly.isIdentity")}} {{ReadOnlyInline}}</dt>
 <dd>
  Is a {{jsxref("Boolean")}} indincating if the matrix identity, that is a matrix with <code>1</code> on the components of its diagonal, and <code>0</code> elsewhere.</dd>
</dl>
<h2 id="Methods">Methods</h2>
<p><em>This interface doesn't inherit any method.</em></p>
<dl>
 <dt>
  {{domxref("DOMMatrixReadOnly.translate()")}}</dt>
 <dd>
  Returns a {{domxref("DOMMatrix")}} containing a new matrix being the result of the matrix being translated by the given vector. The original matrix is not modified.</dd>
 <dt>
  {{domxref("DOMMatrixReadOnly.scale()")}}</dt>
 <dd>
  Returns a {{domxref("DOMMatrix")}} containing a new matrix being the result of the matrix x and y dimensions being scaled by the given factor, centered on the origin given. The original matrix is not modified.</dd>
 <dt>
  {{domxref("DOMMatrixReadOnly.scale3d()")}}</dt>
 <dd>
  Returns a {{domxref("DOMMatrix")}} containing a new matrix being the result of the matrix x, y and z dimension being scaled by the given factor, centered on the origin given. The original matrix is not modified.</dd>
 <dt>
  {{domxref("DOMMatrixReadOnly.scaleNonUniform()")}}</dt>
 <dd>
  Returns a {{domxref("DOMMatrix")}} containing a new matrix being the result of the matrix x, y and z dimension being scaled by the given factor for each dimension, centered on the origin given. The original matrix is not modified.</dd>
 <dt>
  {{domxref("DOMMatrixReadOnly.rotate()")}}</dt>
 <dd>
  Returns a {{domxref("DOMMatrix")}} containing a new matrix being the result of the original matrix being rotated by the given angle, with the rotation centered on the origin given. The original matrix is not modified.</dd>
 <dt>
  {{domxref("DOMMatrixReadOnly.rotateFromVector()")}}</dt>
 <dd>
  Returns a {{domxref("DOMMatrix")}} containing a new matrix being the result of the original matrix being rotated by the angle between the given vector and (1,0), centered on the origin given. The original matrix is not modified.</dd>
 <dt>
  {{domxref("DOMMatrixReadOnly.rotateAxisAngle()")}}</dt>
 <dd>
  Returns a {{domxref("DOMMatrix")}} containing a new matrix being the result of the original matrix being rotated by the given angle and the give vector. The original matrix is not modified.</dd>
 <dt>
  {{domxref("DOMMatrixReadOnly.skewX()")}}</dt>
 <dd>
  Returns a {{domxref("DOMMatrix")}} containing a new matrix being the result of the original matrix being skewed along the x-axis by the given factor. The original matrix is not modified.</dd>
 <dt>
  {{domxref("DOMMatrixReadOnly.skewY()")}}</dt>
 <dd>
  Returns a {{domxref("DOMMatrix")}} containing a new matrix being the result of the original matrix being skewed along the y-axis by the given factor. The original matrix is not modified.</dd>
 <dt>
  {{domxref("DOMMatrixReadOnly.multiply()")}}</dt>
 <dd>
  Returns a {{domxref("DOMMatrix")}} containing a new matrix being the result of the original matrix being multiply by the given {{domxref("DOMMatrix")}}. The original matrix is not modified.</dd>
 <dt>
  {{domxref("DOMMatrixReadOnly.flipX()")}}</dt>
 <dd>
  Returns a {{domxref("DOMMatrix")}} containing a new matrix being the result of the original matrix being flipped around the x-axis, that is multiplied by the <code>DOMMatrix(-1, 0, 0, 1, 0, 0)</code>. The original matrix is not modified.</dd>
 <dt>
  {{domxref("DOMMatrixReadOnly.flipY()")}}</dt>
 <dd>
  Returns a {{domxref("DOMMatrix")}} containing a new matrix being the result of the original matrix being flipped around the y-axis, that is multiplied by the <code>DOMMatrix(1, 0, 0, -1, 0, 0)</code>. The original matrix is not modified.</dd>
 <dt>
  {{domxref("DOMMatrixReadOnly.invert()")}}</dt>
 <dd>
  Returns a {{domxref("DOMMatrix")}} containing a new matrix being the result of the original matrix being inverted. The original matrix is not modified. If the matrix cannot be inverted, all its components are set to <code>NaN</code> and <code>is2D()</code> returns <code>false</code>.</dd>
</dl>
<dl>
 <dt>
  {{domxref("DOMMatrixReadOnly.transformPoint()")}}</dt>
 <dd>
  Returns a {{domxref("DOMPoint")}} that is the point given in parameter multiplied by the matrix. Bot the original point and the matrix aren't modified.</dd>
 <dt>
  {{domxref("DOMMatrixReadOnly.toFloat32Array()")}}</dt>
 <dd>
  Returns a {{jsxref("Float32Array")}} containing the 6 components (<code>a</code>, <code>b</code>, <code>c</code>, <code>d</code>, <code>e</code>, <code>f</code>) in the case of a 2D matrix or the 16 components (<code>m11</code>, <code>m12</code>, <code>m13</code>, <code>m14</code>, <code>m21</code>, <code>m22</code>, <code>m23</code>, <code>m24</code>, <code>m31</code>, <code>m32</code>, <code>m33</code>, <code>m34</code>, <code>m41</code>, <code>m42</code>, <code>m43</code>, <code>m44</code>) for a 3D matrix.</dd>
 <dt>
  {{domxref("DOMMatrixReadOnly.toFloat64Array()")}}</dt>
 <dd>
  Returns a {{jsxref("Float64Array")}} containing the 6 components (<code>a</code>, <code>b</code>, <code>c</code>, <code>d</code>, <code>e</code>, <code>f</code>) in the case of a 2D matrix or the 16 components (<code>m11</code>, <code>m12</code>, <code>m13</code>, <code>m14</code>, <code>m21</code>, <code>m22</code>, <code>m23</code>, <code>m24</code>, <code>m31</code>, <code>m32</code>, <code>m33</code>, <code>m34</code>, <code>m41</code>, <code>m42</code>, <code>m43</code>, <code>m44</code>) for a 3D matrix.</dd>
 <dt>
  {{domxref("DOMMatrixReadOnly.toString()")}}</dt>
 <dd>
  Returns a {{domxref("DOMString")}} containing the 6 components separated by a <code>','</code> and prefixed by the CSS matrix functional notation, as <code>'matrix (a, b, c, d, e, f)',</code> in the case of a 2D matrix or matrix3d functional notation and the 16 components,<code>'matrix3d(m11, m12, m13, m14, m21, m22, m23, m24, m31, m32, m33, m34, m41, m42, m43, m44)'</code>, for a 3D matrix.</dd>
</dl>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{ SpecName('Geometry Interfaces', '#dom-dommatrixreadonly', 'DOMMatrixReadOnly') }}</td>
   <td>{{ Spec2('Geometry Interfaces') }}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>Feature</th>
    <th>Firefox (Gecko)</th>
    <th>Chrome</th>
    <th>Internet Explorer</th>
    <th>Opera</th>
    <th>Safari</th>
   </tr>
   <tr>
    <td>Basic support</td>
    <td>{{CompatGeckoDesktop(33)}}</td>
    <td>{{CompatUnknown}}</td>
    <td>{{CompatNo}}</td>
    <td>{{CompatUnknown}}</td>
    <td>{{CompatNo}}</td>
   </tr>
   <tr>
    <td>Availability on Web workers</td>
    <td>{{CompatNo}}</td>
    <td>{{CompatUnknown}}</td>
    <td>{{CompatNo}}</td>
    <td>{{CompatUnknown}}</td>
    <td>{{CompatNo}}</td>
   </tr>
  </tbody>
 </table>
</div>
<div id="compat-mobile">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>Feature</th>
    <th>Firefox Mobile (Gecko)</th>
    <th>Android</th>
    <th>IE Mobile</th>
    <th>Opera Mobile</th>
    <th>Safari Mobile</th>
   </tr>
   <tr>
    <td>Basic support</td>
    <td>{{CompatGeckoMobile(33)}}</td>
    <td rowspan="1">{{CompatUnknown}}</td>
    <td rowspan="1">{{CompatNo}}</td>
    <td rowspan="1">{{CompatUnknown}}</td>
    <td rowspan="1">{{CompatNo}}</td>
   </tr>
   <tr>
    <td>Availability on Web workers</td>
    <td>{{CompatNo}}</td>
    <td>{{CompatUnknown}}</td>
    <td>{{CompatNo}}</td>
    <td>{{CompatUnknown}}</td>
    <td>{{CompatNo}}</td>
   </tr>
  </tbody>
 </table>
</div>
<h2 id="See_also">See also</h2>
<ul>
 <li>It's modifiable descendant, {{domxref("DOMMatrix")}}</li>
 <li>{{domxref("SVGMatrix")}}, the SVG matrix intended to be superseded by {{domxref("DOMMatrix")}}</li>
 <li>The CSS {{cssxref("transform-function", "matrix()", "#matrix()")}} and {{cssxref("transform-function", "matrix3d()", "#matrix3d()")}} functional notation that can be generated from this interface to be used in a CSS {{cssxref("transform")}}.</li>
</ul>
<p><span id="cke_bm_73C" style="display: none;">&nbsp;</span></p>