DOMMatrix (WebKitCSSMatrix)
===========================

**`DOMMatrix`** は、2D または 3D の回転や平行移動などの変換に適した 4×4 行列を表します。 これは `DOMMatrixReadOnly` インターフェイスの変更可能なバージョンです。

**`WebKitCSSMatrix`** および **`SVGMatrix`** は **`DOMMatrix`** の別名です。

このインターフェイスはウェブワーカー内で利用できるはずですが、一部の実装はまだそうなっていません。

DOMMatrixReadOnly

DOMMatrixコンストラクター
--------

`DOMMatrix()`

新しい `DOMMatrix` オブジェクトを作成します。

インスタンスプロパティ
-----------

*このインターフェイスは `DOMMatrixReadOnly` からプロパティを継承していますが、一部のプロパティは変更可能に変更されています。*

`is2D` 読取専用 

論理値フラグであり、値が `true` の場合、行列は 2D 行列として初期化されます。 `false` の場合、行列は 3D となります。

`isIdentity` 読取専用 

行列が単位行列である場合に `true` となる論理値です。単位行列とは、左上から右下への対角線上にある値（言い換えれば、各方向のオフセットが等しい値）を除いて、すべての値が `0` となる行列のことです。

`m11`, `m12`, `m13`, `m14`, `m21`, `m22`, `m23`, `m24`, `m31`, `m32`, `m33`, `m34`, `m41`, `m42`, `m43`, `m44`

4×4 行列の各成分を表す倍精度浮動小数点数で、 `m11` から `m14` が最初の列、 `m21` から `m24` が 2 つ目の列、というようになります。

`a`, `b`, `c`, `d`, `e`, `f`

2D の回転と平行移動を行うために必要となる、 4×4 行列の成分を表す倍精度浮動小数点数の値です。下記に示すように、これらは 4×4 行列の特定の成分の別名です。

| 2D | 3D の相当品 |
| --- | --- |
| `a` | `m11` |
| `b` | `m12` |
| `c` | `m21` |
| `d` | `m22` |
| `e` | `m41` |
| `f` | `m42` |

インスタンスメソッド
----------

*このインターフェイスには以下のメソッドがあり、また `DOMMatrixReadOnly` から継承したメソッドがあります。*

`DOMMatrix.invertSelf()`

この行列を逆行列に変更します。逆行列にできない場合、その成分はすべて `NaN` に設定され、 `is2D` は `false` を返します。

`DOMMatrix.multiplySelf()`

指定した `DOMMatrix` と後乗算することで、行列を変更します。これは点積 `A⋅B` と等価であり、行列 `A` は入力行列、 `B` はメソッドへの入力として指定された行列です。自分自身を返します。

`DOMMatrix.preMultiplySelf()`

指定した `DOMMatrix` との前乗算によって、行列を変更します。これは点積 `B⋅A` と等価であり、行列 `A` は入力行列、 `B` はメソッドへの入力として指定された行列です。自分自身を返します。

`DOMMatrix.translateSelf()`

指定したベクトルを適用して行列を変更します。既定値では `[0, 0, 0]` です。自分自身を返します。

`DOMMatrix.scaleNonUniformSelf()` 
非推奨

指定された原点を中心として、X、Y、Z 軸に指定した拡大縮小を適用して行列を変更します。既定値は、Y 軸と Z 軸の倍率はどちらも `1` ですが、X 軸の倍率は指定する必要があります。既定値では原点は `(0, 0, 0)` です。自分自身を返します。

`DOMMatrix.scaleSelf()`

指定した原点を中心として、指定した倍率を適用して行列を変更します。また、それ自身を返します。既定では、倍率は 3 軸すべて `1` で、原点は `(0, 0, 0)` です。自分自身を返します。

`DOMMatrix.scale3dSelf()`

指定された原点を中心とした 3 つの軸すべてに、指定された倍率を適用して行列を変更します。自分自身を返します。

`DOMMatrix.rotateSelf()`

指定した度数だけ各軸の周りを回転することで、行列を変更します。自分自身を返します。

`DOMMatrix.rotateAxisAngleSelf()`

指定されたベクトルを中心に、指定した角度だけ回転するように行列を変更します。自分自身を返します。

`DOMMatrix.rotateFromVectorSelf()`

行列を、指定したベクトルと `(1, 0)` とのなす角だけ回転させることにより変更します。自分自身を返します。

`DOMMatrix.setMatrixValue()`

行列の内容を、指定した変換で記述された行列で置き換えます。自分自身を返します。

`DOMMatrix.skewXSelf()`

X 軸に沿って、指定した傾き変換を適用して行列を変更します。自分自身を返します。

`DOMMatrix.skewYSelf()`

指定した傾き変換を Y 軸に沿って適用することで、行列を変更します。自分自身を返します。

静的メソッド
------

*このインターフェイスは `DOMMatrixReadOnly` からメソッドを継承しています。*

`fromFloat32Array()`

指定された単精度（32 ビット）浮動小数点数の配列から、変更可能な新しい `DOMMatrix` オブジェクトを作成します。配列に 6 個の値がある場合、結果は 2D 行列になり、配列に 16 個の値がある場合、結果は 3D 行列になります。そうでない場合、 `TypeError` 例外が発生します。

`fromFloat64Array()`

倍精度（64 ビット）浮動小数点値の配列が指定された場合、変更可能な新しい `DOMMatrix` オブジェクトを作成します。配列に 6 つの値がある場合、結果は 2D 行列になり、配列に 16 個の値がある場合、結果は 3D 行列になります。そうでない場合、 `TypeError` 例外が発生します。

`fromMatrix()`

既存の行列、あるいはそのプロパティの値を提供する `DOMMatrixInit` 辞書が指定された場合、新しい変更可能な `DOMMatrix` オブジェクトを作成します。

使用上の注意
------

`DOMMatrix` インターフェイスで定義される行列は、4行4列で構成されます。この記事で数学を説明することはできませんが、この 4×4 のサイズは、 2D または 3D のジオメトリーに適用する変換を記述するのに十分です。

4×4 の抽象行列を構成する 16 個の要素（m\_11 から m\_44）の位置を示します。



[

m
11

m
21

m
31

m
41



m
12

m
22

m
32

m
42



m
13

m
23

m
33

m
43



m
14

m
24

m
34

m
44

]

\left [ \begin{matrix} m\_{11} & m\_{21} & m\_{31} & m\_{41} \ m\_{12} & m\_{22} & m\_{32} & m\_{42} \ m\_{13} & m\_{23} & m\_{33} & m\_{43} \ m\_{14} & m\_{24} & m\_{34} & m\_{44} \end{matrix} \right ]


`DOMMatrix` インターフェイスは、マークアップ内のすべての行列に使用することを意図して設計されています。

仕様書
---

| Specification |
| --- |
| Geometry Interfaces Module Level 1 # DOMMatrix |

ブラウザー互換性
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `MSCSSMatrix` documentation on MSDN
* `WebKitCSSMatrix` documentation at Safari Developer Library
* Mozilla bug 717722: implement `(WebKit)CSSMatrix()`