Widely available すべての主要ブラウザで対応済み。安心して使用可能。

DOM Geometry

DOMMatrix は、二次元または三次元の回転や平行移動などの変換に適した 4×4 行列を表します。 これは DOMMatrixReadOnly インターフェイスの変更可能なバージョンです。 このインターフェイスはウェブワーカー内で利用できるはずですが、一部の実装はまだそうなっていません。

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

DOMMatrixReadOnly DOMMatrix

DOM操作

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
DOMMatrix
61
79
33
11
61
11
a

このインターフェースはDOMMatrixReadOnlyのプロパティを継承していますが、その一部は変更可能になるよう変更されています。
61
79
33
11
61
11
b

このインターフェースはDOMMatrixReadOnlyのプロパティを継承していますが、その一部は変更可能になるよう変更されています。
61
79
33
11
61
11
c

このインターフェースはDOMMatrixReadOnlyのプロパティを継承していますが、その一部は変更可能になるよう変更されています。
61
79
33
11
61
11
d

このインターフェースはDOMMatrixReadOnlyのプロパティを継承していますが、その一部は変更可能になるよう変更されています。
61
79
33
11
61
11
DOMMatrix

DOMMatrix() コンストラクターは、二次元および三次元演算に適した 4x4 行列を表す新しい DOMMatrix オブジェクトを作成します。
61
79
33
11
61
11
e

このインターフェースはDOMMatrixReadOnlyのプロパティを継承していますが、その一部は変更可能になるよう変更されています。
61
79
33
11
61
11
f

このインターフェースはDOMMatrixReadOnlyのプロパティを継承していますが、その一部は変更可能になるよう変更されています。
61
79
33
11
61
11
fromFloat32Array_static

fromFloat32Array() は DOMMatrix インターフェイスの静的メソッドで、新しい DOMMatrix オブジェクトを作成して指定された単精度（32 ビット）浮動小数点値の配列で初期化します。
61
79
69
11
61
11
fromFloat64Array_static

fromFloat64Array() は DOMMatrix インターフェイスの静的メソッドで、新しい DOMMatrix オブジェクトを作成して指定された倍精度（64 ビット）浮動小数点値の配列で初期化します。
61
79
69
11
61
11
fromMatrix_static

fromMatrix() は DOMMatrix インターフェイスの静的メソッドで、新しい DOMMatrix オブジェクトを、与えられた既存の行列またはそのプロパティの値を提供するオブジェクトから作成します。
61
79
69
11
61
11
invertSelf

invertSelf() は DOMMatrix インターフェイスのメソッドで、元の行列を逆行列にします。行列が逆行列化できない場合、新しい行列の要素はすべて NaN に設定され、その DOMMatrixReadOnly.is2D プロパティは false に設定されます。
61
79
33
11
61
11
m11

このインターフェースはDOMMatrixReadOnlyのプロパティを継承していますが、その一部は変更可能になるよう変更されています。
61
79
33
11
61
11
m12

このインターフェースはDOMMatrixReadOnlyのプロパティを継承していますが、その一部は変更可能になるよう変更されています。
61
79
33
11
61
11
m13

このインターフェースはDOMMatrixReadOnlyのプロパティを継承していますが、その一部は変更可能になるよう変更されています。
61
79
33
11
61
11
m14

このインターフェースはDOMMatrixReadOnlyのプロパティを継承していますが、その一部は変更可能になるよう変更されています。
61
79
33
11
61
11
m21

このインターフェースはDOMMatrixReadOnlyのプロパティを継承していますが、その一部は変更可能になるよう変更されています。
61
79
33
11
61
11
m22

このインターフェースはDOMMatrixReadOnlyのプロパティを継承していますが、その一部は変更可能になるよう変更されています。
61
79
33
11
61
11
m23

このインターフェースはDOMMatrixReadOnlyのプロパティを継承していますが、その一部は変更可能になるよう変更されています。
61
79
33
11
61
11
m24

このインターフェースはDOMMatrixReadOnlyのプロパティを継承していますが、その一部は変更可能になるよう変更されています。
61
79
33
11
61
11
m31

このインターフェースはDOMMatrixReadOnlyのプロパティを継承していますが、その一部は変更可能になるよう変更されています。
61
79
33
11
61
11
m32

このインターフェースはDOMMatrixReadOnlyのプロパティを継承していますが、その一部は変更可能になるよう変更されています。
61
79
33
11
61
11
m33

このインターフェースはDOMMatrixReadOnlyのプロパティを継承していますが、その一部は変更可能になるよう変更されています。
61
79
33
11
61
11
m34

このインターフェースはDOMMatrixReadOnlyのプロパティを継承していますが、その一部は変更可能になるよう変更されています。
61
79
33
11
61
11
m41

このインターフェースはDOMMatrixReadOnlyのプロパティを継承していますが、その一部は変更可能になるよう変更されています。
61
79
33
11
61
11
m42

このインターフェースはDOMMatrixReadOnlyのプロパティを継承していますが、その一部は変更可能になるよう変更されています。
61
79
33
11
61
11
m43

このインターフェースはDOMMatrixReadOnlyのプロパティを継承していますが、その一部は変更可能になるよう変更されています。
61
79
33
11
61
11
m44

このインターフェースはDOMMatrixReadOnlyのプロパティを継承していますが、その一部は変更可能になるよう変更されています。
61
79
33
11
61
11
multiplySelf

multiplySelf() は DOMMatrix インターフェイスのメソッドで、行列を otherMatrix 引数で乗算し、元の行列と指定された行列のドット積 (A⋅B) を計算します。乗数として行列が指定されなかった場合、行列は右下隅と、その直上かつ左隣の要素（m33 と m34）を除き、すべての要素が 0 である行列と乗算されます。これらの要素はデフォルト値 1 を持ちます。
61
79
33
11
61
11
preMultiplySelf

preMultiplySelf() は DOMMatrix インターフェイスのメソッドで、指定された DOMMatrix と行列を左から乗算することで行列を変更します。これは内積 B⋅A に相当し、ここで行列 A はソース行列、B はメソッドへの入力として指定された行列です。乗数として行列が指定されなかった場合、行列は右下隅と、その直上かつ左隣の要素（m33 と m34）を除き、すべての要素が 0 である行列と乗算されます。これらの要素はデフォルト値 1 を持ちます。
61
79
33
11
61
11
rotateAxisAngleSelf

rotateAxisAngleSelf() は DOMMatrix インターフェイスのメソッドで、指定されたベクトルと角度でソース行列を回転させる座標変換メソッドであり、変更後の行列を返します。
61
79
33
11
61
11
rotateFromVectorSelf

rotateFromVectorSelf() は DOMMatrix インターフェイスのメソッドで、指定されたベクトルと (1, 0) との間の角度で行列を回転させることで行列を変更する、変更を行う座標変換メソッドです。回転角度は、ベクトル (1,0)T と (x,y)T の間の時計回り方向の角度、すなわち (+/-)arctan(y/x) で決定されます。x と y が両方とも 0 の場合、角度は 0 として指定され、行列は変更されません。
61
79
33
11
61
11
rotateSelf

rotateSelf() は DOMMatrix インターフェイスのメソッドで、行列に変更を行う座標変換メソッドです。ソース行列をそれぞれの軸を中心に指定された角度だけ回転させ、回転後の行列を返します。
61
79
33
11
61
11
scale3dSelf

scale3dSelf() は DOMMatrix インターフェイスのメソッドで、変更を行う座標変換メソッドであり、指定された原点（デフォルトは (0, 0, 0)）を中心として、3 軸すべてに指定された変倍率を適用することで行列を変更し、三次元で変倍された行列を返します。
61
79
33
11
61
11
scaleSelf

scaleSelf() は DOMMatrix インターフェイスのメソッドで、指定された変倍率を適用して行列を変更する座標変換メソッドです。この変倍率は、デフォルトの原点 (0, 0) を基準に、指定された原点を中心として作用し、変倍された行列を返します。
61
79
33
11
61
11
setMatrixValue

setMatrixValue() は DOMMatrix インターフェイスのメソッドで、指定された座標変換または一連の座標変換によって記述される行列で、行列の内容を置き換え、自分自身を返します。
61
79
33
11
61
11
skewXSelf

skewXSelf() は DOMMatrix インターフェイスのメソッドで、行列を変更する座標変換メソッドです。指定された歪め変換を X 軸方向に適用して元の行列を歪め、歪められた行列を返します。
61
79
33
11
61
11
skewYSelf

skewYSelf() は DOMMatrix インターフェイスのメソッドで、行列を変更する座標変換メソッドです。指定された歪め変換を Y 軸方向に適用して元の行列を歪め、歪められた行列を返します。
61
79
33
11
61
11
translateSelf

translateSelf() は DOMMatrix インターフェイスのメソッドで、行列を変更する座標変換メソッドです。指定されたベクトルを適用し、更新された行列を返します。デフォルトのベクトルは [0, 0, 0] です。
61
79
33
11
61
11
worker_support

労働者で利用可能
61
79
69
11
61
11
DOMMatrixReadOnly

DOMMatrixReadOnly インターフェイスは、 2D および 3D 演算に適した読み取り専用の 4×4 行列を表します。 DOMMatrix インターフェイスは、 DOMMatrixReadOnly をベースとして変更可能にしており、作成後に行列を変更することができます。
61
79
33
11
61
11
a

このインターフェースは、いかなるプロパティも継承していません。
61
79
33
11
61
11
b

このインターフェースは、いかなるプロパティも継承していません。
61
79
33
11
61
11
c

このインターフェースは、いかなるプロパティも継承していません。
61
79
33
11
61
11
d

このインターフェースは、いかなるプロパティも継承していません。
61
79
33
11
61
11
DOMMatrixReadOnly

DOMMatrixReadOnly コンストラクターは新しい DOMMatrixReadOnly オブジェクトを作成します。このオブジェクトは 4x4 の行列を表し、 2D および 3D の演算に適しています。
61
79
62
11
61
11
e

このインターフェースは、いかなるプロパティも継承していません。
61
79
33
11
61
11
f

このインターフェースは、いかなるプロパティも継承していません。
61
79
33
11
61
11
flipX

flipX() は DOMMatrixReadOnly インターフェイスのメソッドで、元の行列を X 軸で反転させた新しい行列を作成します。この操作は行列を DOMMatrix(-1, 0, 0, 1, 0, 0) で乗算するのと同じです。元の行列は変更されません。
61
79
33
11
61
11
flipY

flipY() は DOMMatrixReadOnly インターフェイスのメソッドで、元の行列を Y 軸で反転させた新しい行列を作成します。この操作は行列を DOMMatrix(1, 0, 0, -1, 0, 0) で乗算するのと同じです。元の行列は変更されません。
61
79
33
11
61
11
fromFloat32Array_static

fromFloat32Array() は DOMMatrixReadOnly インターフェイスの静的メソッドで、新しい DOMMatrixReadOnly オブジェクトを与えられた単精度（32 ビット）浮動小数点値の配列から作成します。
61
79
69
11
61
11
fromFloat64Array_static

fromFloat64Array() は DOMMatrixReadOnly インターフェイスの静的メソッドで、新しい DOMMatrixReadOnly オブジェクトを与えられた倍精度（64 ビット）浮動小数点値の配列から作成します。
61
79
69
11
61
11
fromMatrix_static

fromMatrix() は DOMMatrixReadOnly インターフェイスの静的メソッドで、新しい DOMMatrixReadOnly オブジェクトを、与えられた既存の行列またはそのプロパティの値を提供するオブジェクトから作成します。
61
79
69
11
61
11
inverse

inverse() は DOMMatrixReadOnly インターフェイスのメソッドで、元の行列の逆行列となる新しい行列を作成します。行列が逆行列化できない場合、新しい行列の要素はすべて NaN に設定され、その DOMMatrixReadOnly.is2D プロパティは false に設定されます。元の行列は変更されません。
61
79
33
11
61
11
is2D

is2D は DOMMatrixReadOnly インターフェイスの読み取り専用プロパティで、行列が二次元である場合に true となる論理値のフラグです。行列が二次元行列として初期化され、二次元変換操作のみが適用された場合、この値は true となります。それ以外の場合は、行列は三次元で定義され、is2D は false となります。
61
79
33
11
61
11
isIdentity

isIdentity は DOMMatrixReadOnly インターフェイスの読み取り専用プロパティで、この行列が恒等行列であれば true となる論理値です。
61
79
59
11
61
11
m11

このインターフェースは、いかなるプロパティも継承していません。
61
79
33
11
61
11
m12

このインターフェースは、いかなるプロパティも継承していません。
61
79
33
11
61
11
m13

このインターフェースは、いかなるプロパティも継承していません。
61
79
33
11
61
11
m14

このインターフェースは、いかなるプロパティも継承していません。
61
79
33
11
61
11
m21

このインターフェースは、いかなるプロパティも継承していません。
61
79
33
11
61
11
m22

このインターフェースは、いかなるプロパティも継承していません。
61
79
33
11
61
11
m23

このインターフェースは、いかなるプロパティも継承していません。
61
79
33
11
61
11
m24

このインターフェースは、いかなるプロパティも継承していません。
61
79
33
11
61
11
m31

このインターフェースは、いかなるプロパティも継承していません。
61
79
33
11
61
11
m32

このインターフェースは、いかなるプロパティも継承していません。
61
79
33
11
61
11
m33

このインターフェースは、いかなるプロパティも継承していません。
61
79
33
11
61
11
m34

このインターフェースは、いかなるプロパティも継承していません。
61
79
33
11
61
11
m41

このインターフェースは、いかなるプロパティも継承していません。
61
79
33
11
61
11
m42

このインターフェースは、いかなるプロパティも継承していません。
61
79
33
11
61
11
m43

このインターフェースは、いかなるプロパティも継承していません。
61
79
33
11
61
11
m44

このインターフェースは、いかなるプロパティも継承していません。
61
79
33
11
61
11
multiply

multiply() は DOMMatrixReadOnly インターフェイスのメソッドで、指定された行列と otherMatrix 引数のドット積となる新しい行列を生成し、それを返します。otherMatrix が省略された場合、行列は右下隅と、その直上かつ左隣の要素（m33 と m34）を除き、すべての要素が 0 である行列と乗算されます。これらの要素はデフォルト値 1 を持ちます。元の行列は変更されません。
61
79
33
11
61
11
rotate

rotate() は DOMMatrixReadOnly インターフェイスのメソッドで、ソース行列をそれぞれの軸について指定された角度だけ回転させて生成された、新しい DOMMatrix を返します。元の行列は変更されません。
61
79
33
11
61
11
rotateAxisAngle

rotateAxisAngle() は DOMMatrixReadOnly インターフェイスのメソッドで、指定されたベクトルと角度でソース行列を回転させて生成された、新しい DOMMatrix を返します。元の行列は変更されません。
61
79
33
11
61
11
rotateFromVector

rotateFromVector() は DOMMatrixReadOnly インターフェイスの読み取り専用プロパティで、指定されたベクトルと (1, 0) の間の角度でソース行列を回転させて作成された新しい DOMMatrix を返します。回転角度は、ベクトル (1,0)T と (x,y)T の間の時計回り方向の角度、すなわち (+/-)arctan(y/x) で決定されます。x と y が両方とも 0 の場合、角度は 0 と指定します。元の行列は変更されません。
61
79
33
11
61
11
scale

scale() は DOMMatrixReadOnly インターフェイスのメソッドで、 元の行列に拡大縮小変換を施した新しい行列を作成します。
61
79
33
11
61
11
scale3d

scale3d() は DOMMatrixReadOnly インターフェイスのメソッドで、 行列に三次元の変倍座標変換を適用した結果となる新しい行列を生成します。このメソッドは、ソースとなる三次元行列を指定された変倍率で拡大縮小し、原点の引数で指定された原点（デフォルトは (0, 0, 0)）を中心として変換した結果となる新しい DOMMatrix を返します。元の行列は変更されません。
61
79
33
11
61
11
skewX

skewX() は DOMMatrixReadOnly インターフェイスのメソッドで、ソース行列に対して指定された歪め変換を X 軸方向に適用して作成された新しい DOMMatrix を返します。元の行列は変更されません。
61
79
33
11
61
11
skewY

skewY() は DOMMatrixReadOnly インターフェイスのメソッドで、ソース行列に対して指定された歪め変換を Y 軸方向に適用して作成された新しい DOMMatrix を返します。元の行列は変更されません。
61
79
33
11
61
11
toFloat32Array

toFloat32Array() は DOMMatrixReadOnly インターフェイスのメソッドで、行列を構成する 16 個の要素すべて (m11, m12, m13, m14, m21, m22, m23, m24, m31, m32, m33, m34, m41, m42, m43, m44) を格納した新しい Float32Array を返します。要素は、列優先順（言い換えれば、第 1 列を上から下へ、次に第 2 列、という順序）で単精度浮動小数点数として配列に格納されます。
61
79
33
11
61
11
toFloat64Array

toFloat64Array() は DOMMatrixReadOnly インターフェイスのメソッドで、行列を構成する 16 個の要素すべて (m11, m12, m13, m14, m21, m22, m23, m24, m31, m32, m33, m34, m41, m42, m43, m44) を格納した新しい Float64Array を返します。要素は、列優先順（言い換えれば、第 1 列を上から下へ、次に第 2 列、という順序）で倍精度浮動小数点数として配列に格納されます。
61
79
33
11
61
11
toJSON

toJSON() は DOMMatrixReadOnly インターフェイスのメソッドで、 JSON オブジェクトを生成して返します。この JSON オブジェクトには、二次元行列の要素 a から f、4×4 三次元行列の 16 個の要素 m[1-4][1-4]、論理値の DOMMatrixReadOnly.is2D プロパティ、および論理値の DOMMatrixReadOnly.isIdentity プロパティが含まれます。
61
79
62
11
61
11
toString

toString() は DOMMatrixReadOnly インターフェイスのstringifierで、この行列の値を、matrix() または matrix3d() の CSS 座標変換関数の形の文字列として返します。これは、6 個または 16 個の座標値をカンマで区切ったリストで、それぞれ "matrix( または "matrix3d( で始まり、)" で終わります。
61
79
33
11
61
11
transformPoint

transformPoint は DOMMatrixReadOnly インターフェイスのメソッドで、指定された点を行列によって座標変換し、新しい DOMPoint オブジェクトを作成します。行列も元の点も変更されません。
61
79
33
11
61
11
translate

translate() は DOMMatrixReadOnly インターフェイスのメソッドで、元の行列を平行移動させた結果の新しい行列を作成します。
61
79
33
11
61
11
worker_support

労働者で利用可能
61
79
69
11
61
11
DOMPoint

DOMPoint オブジェクトは、座標系における二次元または三次元の点を表します。最大三次元までの座標の値、およびオプションで視点の値も含まれます。 DOMPoint は DOMPointReadOnly に基づいていますが、そのプロパティの値を変更することができます。
61
79
31
10.1
61
10.3
DOMPoint

DOMPoint() コンストラクターは、プロパティの一部または全部の値を指定して、新しい DOMPoint オブジェクトを作成し、それを返します。
61
79
31
10.1
61
10.3
fromPoint_static

DOMPoint の静的メソッド fromPoint() は，元の点を与えて新しい変更可能な DOMPoint オブジェクトを作成し、返します。
61
79
62
10.1
61
10.3
w

DOMPoint インターフェイスの w プロパティは、空間上のこの点の視点位置 w を保持します。
61
79
31
10.1
61
10.3
worker_support

労働者で利用可能
61
79
69
10.1
61
10.3
x

DOMPoint インターフェイスの x プロパティは、空間内のある点の水平座標 x を保持します。
61
79
31
10.1
61
10.3
y

DOMPoint インターフェイスの y プロパティは、空間内の点の垂直座標 y を保持します。
61
79
31
10.1
61
10.3
z

DOMPoint インターフェイスの z プロパティは、空間内の点の奥行き座標を指定します。
61
79
31
10.1
61
10.3
DOMPointReadOnly

DOMPointReadOnly インターフェイスは、 DOMPoint が座標系で 2D または 3D の点を定義するために使用する座標フィールドと透視図フィールドを指定するものです。
61
79
31
10.1
61
10.3
DOMPointReadOnly

DOMPointReadOnly() コンストラクターは、スクリプトコードによってその値を変更できない、 2D または 3D の点を表す新しい DOMPointReadOnly オブジェクト（オプションで遠近法を使用可能）を返します。
61
79
62
10.1
61
10.3
fromPoint_static

静的な {domxref("DOMPointReadOnly")}} メソッド fromPoint() は、指定された元の点から新しい DOMPointReadOnly オブジェクトを作成し、それを返します。
61
79
62
10.1
61
10.3
matrixTransform

DOMPointReadOnly インターフェースの matrixTransform() メソッドは、オブジェクトとして指定された行列変換を DOMPointReadOnly オブジェクトに適用し、新しい DOMPointReadOnly オブジェクトを作成して返します。行列もポイントも変更されることはありません。
61
79
69
11
61
11
toJSON

メソッド toJSON() は、この点オブジェクトの JSON 形式を表すオブジェクトを返します。
61
79
62
10.1
61
10.3
w

DOMPointReadOnly インターフェイスの w プロパティは、この点の視点位置である w を保持します。これは空間内の読み取り専用の点です。
61
79
31
10.1
61
10.3
worker_support

労働者で利用可能
61
79
69
10.1
61
10.3
x

DOMPointReadOnly インターフェイスの x プロパティは、この点の水平座標 x を保持します。これは、空間内の読み取り専用の点です。このプロパティは、 DOMPoint オブジェクトの読み取り専用版なので、 JavaScript コードでは変更することができません。
61
79
31
10.1
61
10.3
y

DOMPointReadOnly インターフェイスの y プロパティは、空間の読み取り専用の点における垂直座標 y を保持します。
61
79
31
10.1
61
10.3
z

DOMPointReadOnly インターフェイスの z プロパティは、空間の読み取り専用の点における置く息座標 z を保持します。
61
79
31
10.1
61
10.3
DOMQuad

DOMQuad は任意の四角形の角を定義する 4 つの DOMPoint の集合です。 DOMQuad を返すことで、 getBoxQuads() は任意の 2D または 3D 変換を表示している場合でも正確な情報を返すことができます。便利な bounds 属性があり、軸に沿った長方形が欲しい場合に DOMRectReadOnly を返します。
61
79
31
11
61
11
DOMQuad

DOMQuad() コンストラクタは、プロパティの一部またはすべての値が指定された場合、新しい DOMQuad オブジェクトを作成して返します。
61
79
31
11
61
11
fromQuad_static

DOMQuad インターフェースの fromQuad() 静的メソッドは、指定された座標セットに基づいて、別の DOMQuad オブジェクトの形状を持つ新しい DOMQuad オブジェクトを返します。
61
79
69
11
61
11
fromRect_static

DOMQuad インターフェースの fromRect() 静的メソッドは、DOMRect オブジェクトの形式で指定された座標セットに基づいて、新しい DOMQuad オブジェクトを返します。
61
79
69
11
61
11
getBounds

DOMQuad クラスの getBounds() メソッドは、その DOMQuad オブジェクトを完全に包含する最小の矩形を表す DOMRect オブジェクトを返します。
61
79
62
11
61
11
p1

DOMQuad インターフェースの p1 プロパティには、DOMQuad の 4 つの角のうちの 1 つを表す DOMPoint オブジェクトが格納されます。DOMQuad.fromRect_static から作成された場合、これは座標 (x, y) の点となります。
61
79
31
11
61
11
p2

DOMQuad インターフェースの p2 プロパティには、DOMQuad の 4 つの角のいずれかを表す DOMPoint オブジェクトが格納されます。DOMQuad.fromRect_static から作成された場合、このプロパティは座標 (x + width, y) の点を表します。
61
79
31
11
61
11
p3

DOMQuad インターフェースの p3 プロパティには、DOMQuad の 4 つの角のいずれかを表す DOMPoint オブジェクトが格納されます。DOMQuad.fromRect_static から作成された場合、このプロパティは (x + width, y + height) の座標を持つ点を表します。
61
79
31
11
61
11
p4

DOMQuad インターフェースの p4 プロパティには、DOMQuad の 4 つの角のうちの 1 つを表す DOMPoint オブジェクトが格納されます。DOMQuad.fromRect_static から作成された場合、このプロパティは座標 (x, y + height) の点を表します。
61
79
31
11
61
11
toJSON

DOMQuad の toJSON() メソッドは、DOMQuad オブジェクトの JSON 表現を返します。
61
79
62
11
61
11
worker_support

労働者で利用可能
61
79
69
11
61
11
DOMRect

DOMRect は矩形の大きさと位置を記述します。
61
79
27
10.1
61
10.3
DOMRect

DOMRect() コンストラクターは、新しい DOMRect オブジェクトを作成します。
61
79
31
10.1
61
10.3
fromRect_static

fromRect() は DOMRect オブジェクトの静的メソッドで、新しい DOMRect オブジェクトを指定した位置と寸法で作成します。
61
79
69
10.1
61
10.3
height

height は DOMRect インターフェイスのプロパティで、この矩形の高さを表します。値は負の値も指定できます。
2
12
3
4
18
3.2
width

width は DOMRect インターフェイスのプロパティで、この矩形の幅を表します。値は負の値も指定できます。
2
12
3
4
18
3.2
worker_support

労働者で利用可能
61
79
69
10.1
61
10.3
x

x は DOMRect インターフェイスのプロパティで、矩形の x 座標を表します。これは、ビューポートの左端と矩形の原点との水平距離です。
61
79
31
10.1
61
10.3
y

y は DOMRect インターフェイスのプロパティで、矩形の y 座標を表します。これは、ビューポートの上端と矩形の原点との垂直距離です。
61
79
31
10.1
61
10.3
DOMRectList

DOMRectList インターフェイスは、 DOMRect オブジェクトの集合を表します。通常、 Element.getClientRects などのメソッドによって返される境界ボックスなど、具体的な要素に関連付けられた長方形を保持するために使用されます。このインターフェイスは、リスト内の各長方形にインデックスを介してアクセスする機能と、リスト内の長方形の総数を表す length プロパティを提供します。
61
79
27
10.1
61
10.3
item

DOMRectList の item() メソッドは、リスト内の指定されたインデックスの DOMRect を返します。インデックスが範囲外の場合は null を返します。
2
12
3
4
18
3
length

length は DOMRectList インターフェイスの読み取り専用プロパティで、リスト内の DOMRect オブジェクトの数を返します。
2
12
3
4
18
3
DOMRectReadOnly

DOMRectReadOnly インターフェイスは（DOMRect でも使用される）標準プロパティを設定し、すべてのプロパティが変更不可の矩形を定義します。
61
79
31
10.1
61
10.3
bottom

bottom は DOMRectReadOnly インターフェイスの読み取り専用プロパティで、この DOMRect の下端の座標値を返します。（y + height と同じか、 height が負の数であれば y と同じ値です。）
2
12
3
4
18
3.2
DOMRectReadOnly

DOMRectReadOnly() コンストラクターは新しい DOMRectReadOnly オブジェクトを生成します。
61
79
62
10.1
61
10.3
fromRect_static

fromRect() は DOMRectReadOnly オブジェクトの静的メソッドで、指定された位置と大きさで新しい DOMRectReadOnly オブジェクトを作成します。
61
79
69
10.1
61
10.3
height

height は DOMRectReadOnly インターフェイスの読み取り専用プロパティで、この DOMRect の高さを表します。
2
12
3
4
18
3.2
left

left は DOMRectReadOnly インターフェイスの読み取り専用プロパティで、この DOMRect の左端の座標を返します。（x と同じ、または width が負の数であれば x + width と同じです。）
2
12
3
4
18
3.2
right

right は DOMRectReadOnly インターフェイスの読み取り専用プロパティで、この DOMRect の右側の座標値を返します。（x + width と同じ、または width が負の数の場合は x と同じです。）
2
12
3
4
18
3.2
toJSON

DOMRectReadOnly の toJSON() メソッドは、この DOMRectReadOnly オブジェクトの JSON 表現を返します。
61
79
62
10.1
61
10.3
top

top は DOMRectReadOnly の読み取り専用インターフェイスで、 DOMRect の上端の座標値を返します。（y と同じ、または height が負の数の場合は y + height と同じです。）
2
12
3
4
18
3.2
width

width は DOMRectReadOnly インターフェイスの読み取り専用プロパティで、この DOMRect の幅を表します。
2
12
3
4
18
3.2
worker_support

労働者で利用可能
61
79
69
10.1
61
10.3
x

x は DOMRectReadOnly インターフェイスの読み取り専用プロパティで、 DOMRect の原点の X 座標を表します。
61
79
31
10.1
61
10.3
y

y は DOMRectReadOnly インターフェイスの読み取り専用プロパティで、この DOMRect の原点の Y 座標を表します。
61
79
31
10.1
61
10.3
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 2件
対応条件
  • 以前は別名で対応していました: SVGMatrix (5)
  • 以前は別名で対応していました: WebKitCSSMatrix (2)
注釈 4件
対応条件
  • 以前は別名で対応していました: WebKitCSSMatrix (12)
  • 以前は別名で対応していました: SVGMatrix (12)
  • 以前は別名で対応していました: MSCSSMatrix (12)
削除済み
  • このバージョンで機能が削除されました (79)
注釈 2件
対応条件
  • 以前は別名で対応していました: WebKitCSSMatrix (49)
  • 以前は別名で対応していました: SVGMatrix (1.5)
注釈 2件
対応条件
  • 以前は別名で対応していました: SVGMatrix (5)
  • 以前は別名で対応していました: WebKitCSSMatrix (4)
注釈 2件
対応条件
  • 以前は別名で対応していました: SVGMatrix (18)
  • 以前は別名で対応していました: WebKitCSSMatrix (18)
注釈 2件
対応条件
  • 以前は別名で対応していました: SVGMatrix (4)
  • 以前は別名で対応していました: WebKitCSSMatrix (3)
注釈 2件
対応条件
  • 以前は別名で対応していました: SVGMatrix (5)
  • 以前は別名で対応していました: WebKitCSSMatrix (2)
注釈 4件
対応条件
  • 以前は別名で対応していました: WebKitCSSMatrix (12)
  • 以前は別名で対応していました: SVGMatrix (12)
  • 以前は別名で対応していました: MSCSSMatrix (12)
削除済み
  • このバージョンで機能が削除されました (79)
注釈 2件
対応条件
  • 以前は別名で対応していました: WebKitCSSMatrix (49)
  • 以前は別名で対応していました: SVGMatrix (1.5)
注釈 2件
対応条件
  • 以前は別名で対応していました: SVGMatrix (5)
  • 以前は別名で対応していました: WebKitCSSMatrix (4)
注釈 2件
対応条件
  • 以前は別名で対応していました: SVGMatrix (18)
  • 以前は別名で対応していました: WebKitCSSMatrix (18)
注釈 2件
対応条件
  • 以前は別名で対応していました: SVGMatrix (4)
  • 以前は別名で対応していました: WebKitCSSMatrix (3)
注釈 1件
実装メモ
  • Firefox 69 以降、仕様書に従い、最初のパラメータ（`scale`）はオプションとなり、デフォルト値は 1 になりました。以前は必須でした。
注釈 1件
実装メモ
  • Firefox 69では、`scaleSelf()`の最新の6引数構文がサポートされました。以前は、`scale(scaleX[, originX][, originY]])`という旧式の3引数構文のみがサポートされていました。
注釈 1件
実装メモ
  • Firefox 69 では、`scale()` の最新の 6 パラメータ構文がサポートされました。以前は、古い 3 パラメータ構文（`scale(scaleX[, originX][, originY]])`）のみがサポートされていました。
注釈 1件
実装メモ
  • Firefox 69 以降、仕様書に従い、最初のパラメータ（`scale`）はオプションとなり、デフォルト値は 1 になりました。以前は必須でした。
注釈 1件
実装メモ
  • Firefox 69 以前では、`sx` パラメータが必須でしたが、現在は引数を指定せずに `skewX()` を呼び出すことができます。この場合、値は 0 とみなされます。
注釈 1件
実装メモ
  • Firefox 69 以前では、`sy` パラメータが必須でしたが、現在は引数を指定せずに `skewY()` を呼び出すことができます。この場合、値は 0 とみなされます。
注釈 1件
実装メモ
  • Firefox 69 以前では、`p1` から `p4` までのデフォルト値は未定義でしたが、現在は `DOMQuadInit` によってこれらが `false` と定義されています。
注釈 1件
実装メモ
  • Firefox 69 以前では、`p1` から `p4` までのデフォルト値は未定義でしたが、現在は `DOMQuadInit` によってこれらが `false` と定義されています。
注釈 1件
実装メモ
  • Firefox 69 以前では、`p1` から `p4` までのデフォルト値は未定義でしたが、現在は `DOMQuadInit` によってこれらが `false` と定義されています。
注釈 1件
実装メモ
  • Firefox 69 以前では、`p1` から `p4` までのデフォルト値は未定義でしたが、現在は `DOMQuadInit` によってこれらが `false` と定義されています。
注釈 2件
削除済み
  • このバージョンで機能が削除されました (61)
対応条件
  • 以前は別名で対応していました: ClientRect (2)
注釈 2件
削除済み
  • このバージョンで機能が削除されました (79)
対応条件
  • 以前は別名で対応していました: ClientRect (12)
注釈 2件
削除済み
  • このバージョンで機能が削除されました (27)
対応条件
  • 以前は別名で対応していました: ClientRect (3)
注釈 2件
削除済み
  • このバージョンで機能が削除されました (11)
対応条件
  • 以前は別名で対応していました: ClientRect (4)
注釈 2件
削除済み
  • このバージョンで機能が削除されました (61)
対応条件
  • 以前は別名で対応していました: ClientRect (18)
注釈 2件
削除済み
  • このバージョンで機能が削除されました (11)
対応条件
  • 以前は別名で対応していました: ClientRect (3.2)
注釈 2件
削除済み
  • このバージョンで機能が削除されました (61)
対応条件
  • 以前は別名で対応していました: ClientRectList (2)
注釈 2件
削除済み
  • このバージョンで機能が削除されました (79)
対応条件
  • 以前は別名で対応していました: ClientRectList (12)
注釈 2件
削除済み
  • このバージョンで機能が削除されました (27)
対応条件
  • 以前は別名で対応していました: ClientRectList (3)
注釈 2件
削除済み
  • このバージョンで機能が削除されました (11)
対応条件
  • 以前は別名で対応していました: ClientRectList (4)
注釈 2件
削除済み
  • このバージョンで機能が削除されました (61)
対応条件
  • 以前は別名で対応していました: ClientRectList (18)
注釈 2件
削除済み
  • このバージョンで機能が削除されました (11)
対応条件
  • 以前は別名で対応していました: ClientRectList (3)
注釈 2件
削除済み
  • このバージョンで機能が削除されました (61)
対応条件
  • 以前は別名で対応していました: ClientRect (2)
注釈 2件
削除済み
  • このバージョンで機能が削除されました (79)
対応条件
  • 以前は別名で対応していました: ClientRect (12)
注釈 4件
削除済み
  • このバージョンで機能が削除されました (31)
  • このバージョンで機能が削除されました (27)
対応条件
  • 以前は別名で対応していました: DOMRect (27)
  • 以前は別名で対応していました: ClientRect (3)
注釈 2件
削除済み
  • このバージョンで機能が削除されました (11)
対応条件
  • 以前は別名で対応していました: ClientRect (4)
注釈 2件
削除済み
  • このバージョンで機能が削除されました (61)
対応条件
  • 以前は別名で対応していました: ClientRect (18)
注釈 2件
削除済み
  • このバージョンで機能が削除されました (11)
対応条件
  • 以前は別名で対応していました: ClientRect (3.2)

実務での使いどころ

  • DOM Geometry の活用

    DOMMatrix は、二次元または三次元の回転や平行移動などの変換に適した 4×4 行列を表します。

注意点

  • 古いブラウザでは対応していない場合がある。

実装メモ

  • 一部の API はセキュアコンテキスト (HTTPS) やユーザー操作起点を必要とする。利用前に要件を確認すること。

参考リンク