# DOMMatrix

## 在此页

 DOMMatrix  interface represents 4×4 matrices, suitable for 2D and 3D operations including rotation and translation. It is a mutable version of the  DOMMatrixReadOnly  接口。

This interface should be available inside web workers , though some implementations don't allow it yet.

## 构造函数

 DOMMatrix() 
Creates and returns a new  DOMMatrix  对象。

## 特性

This interface inherits properties from  DOMMatrixReadOnly  , though some of these properties are altered to be mutable.

 is2D  只读
A Boolean flag whose value is  true  if the matrix was initialized as a 2D matrix. If  false  , the matrix is 3D.
 isIdentity  只读
A Boolean whose value is  true  if the matrix is the identity matrix . The identity matrix is one in which every value is  0  except those on the main diagonal from top-left to bottom-right corner (in other words, where the offsets in each direction are equal).
 m11  ,  m12  ,  m13  ,  m14  ,  m21  ,  m22  ,  m23  ,  m24  ,  m31  ,  m32  ,  m33  ,  m34  ,  m41  ,  m42  ,  m43  ,  m44 
Double-precision floating-point values representing each component of a 4×4 matrix, where  m11  through  m14  are the first column,  m21  through  m24  are the second column, and so forth.
 a  ,  b  ,  c  ,  d  ,  e  ,  f 

Double-precision floating-point values representing the components of a 4×4 matrix which are required in order to perform 2D rotations and translations. These are aliases for specific components of a 4×4 matrix, as shown below.

 2D   3D equivalent 
 a   m11 
 b   m12 
 c   m21 
 d   m22 
 e   m41 
 f   m42 

## 方法

This interface includes the following methods, as well as the methods it inherits from  DOMMatrixReadOnly  .

 DOMMatrix.invertSelf() 
Modifies the matrix by inverting it. If the matrix can't be inverted, its components are all set to  NaN  ，和  is2D  返回  false  .
 DOMMatrix.multiplySelf() 
Modifies the matrix by post-multiplying it with the specified  DOMMatrix  . This is equivalent to the dot product  A⋅B  , where matrix  A  is the source matrix and  B  is the matrix given as an input to the method. Returns itself.
 DOMMatrix.preMultiplySelf() 
Modifies the matrix by pre-multiplying it with the specified  DOMMatrix  . This is equivalent to the dot product  B⋅A  , where matrix  A  is the source matrix and  B  is the matrix given as an input to the method. Returns itself.
 DOMMatrix.translateSelf() 
Modifies the matrix by applying the specified vector. The default vector is  [0, 0, 0]  . Returns itself.
 DOMMatrix.scaleNonUniformSelf() 
Modifies the matrix by applying the specified scaling on the X, Y, and Z axes, centered at the given origin. By default, the Y and Z axes' scaling factors are both  1  , but the scaling factor for X must be specified. The default origin is  (0, 0, 0)  . Returns itself.
 DOMMatrix.scaleSelf() 
Modifies the matrix by applying the specified scaling factors, with the center located at the specified origin. Also returns itself. By default, the scaling factor is  1  for all three axes, and the origin is  (0, 0, 0)  . Returns itself.
 DOMMatrix.scale3dSelf() 
Modifies the matrix by applying the specified scaling factor to all three axes, centered on the given origin. Returns itself.
 DOMMatrix.rotateSelf() 
Modifies the matrix by rotating itself around each axis by the specified number of degrees. Returns itself.
 DOMMatrix.rotateAxisAngleSelf() 
Modifies the matrix by rotating it by the specified angle around the given vector. Returns itself.
 DOMMatrix.rotateFromVectorSelf() 
Modifies the matrix by rotating it by the angle between the specified vector and  (1, 0)  . Returns itself.
 DOMMatrix.setMatrixValue() 
Replaces the contents of the matrix with the matrix described by the specified transform or transforms. Returns itself.
 DOMMatrix.skewXSelf() 
Modifies the matrix by applying the specified skew transformation along the X-axis. Returns itself.
 DOMMatrix.skewYSelf() 
Modifies the matrix by applying the specified skew transformation along the Y-axis. Returns itself.

## 静态方法

This interface inherits methods from  DOMMatrixReadOnly  .

 fromFloat32Array() 
Creates a new mutable  DOMMatrix  object given an array of single-precision (32-bit) floating-point values. If the array has six values, the result is a 2D matrix; if the array has 16 values, the result is a 3D matrix. Otherwise, a  TypeError  exception is thrown.
 fromFloat64Array() 
Creates a new mutable  DOMMatrix  object given an array of double-precision (64-bit) floating-point values. If the array has six values, the result is a 2D matrix; if the array has 16 values, the result is a 3D matrix. Otherwise, a  TypeError  exception is thrown.
 fromMatrix() 
Creates a new mutable  DOMMatrix  object given an existing matrix or a  DOMMatrixInit  dictionary which provides the values for its properties.

## Usage notes

The matrix defined by the  DOMMatrix  interface is comprised of four rows of four columns each. While it's beyond the scope of this article to explain the mathematics involved, this 4×4 size is enough to describe any transformation you might apply to either 2D or 3D geometries.

 DOMMatrix  interface is designed with the intent that it will be used for all matrices within markup, supplanting the  SVGMatrix  and  CSSMatrix  接口。

## 规范

Geometry Interfaces Module Level 1
The definition of 'DOMMatrix' in that specification.

## 浏览器兼容性

 Desktop Mobile Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Chrome 61 61 45 Disabled Disabled From version 45: this feature is behind the  --enable-blink-features=GeometryInterfaces  runtime flag. Edge 79 79 79 Disabled Disabled From version 79: this feature is behind the  --enable-blink-features=GeometryInterfaces  runtime flag. Firefox 33 IE No Opera 48 48 32 Disabled Disabled From version 32: this feature is behind the  --enable-blink-features=GeometryInterfaces  runtime flag. Safari 11 WebView Android 61 Chrome Android 61 61 45 Disabled Disabled From version 45: this feature is behind the  --enable-blink-features=GeometryInterfaces  runtime flag. Firefox Android 33 Opera Android 48 48 32 Disabled Disabled From version 32: this feature is behind the  --enable-blink-features=GeometryInterfaces  runtime flag. Safari iOS 11 Samsung Internet Android 8.0 Chrome 45 Edge 79 Firefox 33 IE No Opera 32 Safari 11 WebView Android 61 Chrome Android 45 Firefox Android 33 Opera Android 32 Safari iOS 11 Samsung Internet Android 8.0 Chrome 45 Edge 79 Firefox 33 33 Starting in Firefox 69, the first parameter (  scale  ) is now optional with a default value of 1, per the specification. Previously it was required. IE No Opera 32 Safari 11 WebView Android 61 Chrome Android 45 Firefox Android 33 33 Firefox for Android requires the first parameter (  scale  ). Opera Android 32 Safari iOS 11 Samsung Internet Android 8.0 Chrome 45 Edge 79 Firefox 33 33 Firefox 69 introduced support for the modern six-parameter syntax for  scaleSelf()  . Previously, it only supported the older three-parameter syntax:  scale( scaleX [, originX ][, originY ]]])  . IE No Opera 32 Safari 11 WebView Android 61 Chrome Android 45 Firefox Android 部分支持 33 部分支持 33 Firefox for Android only supports the older three-parameter syntax for  scaleSelf()  :  scale( scaleX [, originX ][, originY ]]])  , and not the six-parameter syntax. Opera Android 32 Safari iOS 11 Samsung Internet Android 8.0 Chrome 57 Edge 79 Firefox 69 IE No Opera 44 Safari 11 WebView Android 61 Chrome Android 57 Firefox Android No Opera Android 43 Safari iOS 11 Samsung Internet Android 8.0

## 另请参阅

1.  DOMMatrix 
2. 构造函数
3. 继承：
4. Related pages for Geometry Interfaces