Geometry Interfaces Module Level 1

Geometry Interfaces Module Level 1
Geometry Interfaces Module Level 1
W3C Candidate Recommendation Draft
12 December 2025
More details about this document
This version:
Latest published version:
Editor's Draft:
Previous Versions:
History:
Implementation Report:
Test Suites:
Feedback:
CSSWG Issues Repository
Editors:
Yehonatan Daniv
Wix.com
Sebastian Zartner
Invited Expert
Former Editors:
Dirk Schulze
Adobe Inc.
Chris Harrelson
Google
Simon Pieters
Opera Software AS
Rik Cabanier
Magic Leap
Suggest an Edit for this Spec:
GitHub Editor
World Wide Web Consortium
W3C
liability
trademark
and
permissive document license
rules apply.
Abstract
This specification provides basic geometric interfaces to represent points, rectangles, quadrilaterals and transformation matrices that can be used by other modules or specifications.
CSS
is a language for describing the rendering of structured documents
(such as HTML and XML)
on screen, on paper, etc.
Status of this document
This section describes the status of this document at the time of its publication.
A list of current W3C publications
and the latest revision of this technical report
can be found in the
W3C standards and drafts index.
This document was published
by the
CSS Working Group
as a
Candidate Recommendation Draft
using the
Recommendation
track
Publication as a Candidate Recommendation
does not imply endorsement by
W3C
and its Members.
A Candidate Recommendation Draft
integrates changes from the previous Candidate Recommendation
that the Working Group intends to include in a subsequent Candidate Recommendation Snapshot.
This is a draft document
and may be updated, replaced
or obsoleted by other documents at any time.
It is inappropriate to cite this document as other than a work in progress.
Please send feedback
by
filing issues in GitHub
(preferred),
including the spec code “geometry” in the title, like this:
“[geometry]
…summary of comment…
”.
All issues and comments are
archived
Alternately, feedback can be sent to the (
archived
) public mailing list
www-style@w3.org
This document is governed by the
18 August 2025 W3C Process Document
This document was produced by a group operating under the
W3C Patent Policy
W3C maintains a
public list of any patent disclosures
made in connection with the deliverables of the group;
that page also includes instructions for disclosing a patent.
An individual who has actual knowledge of a patent that the individual believes
contains
Essential Claim(s)
must disclose the information in accordance with
section 6 of the W3C Patent Policy
1.
Introduction
This section is non-normative.
This specification describes several geometry interfaces for the representation of points,
rectangles, quadrilaterals and transformation matrices with the dimension of 3x2 and 4x4.
The SVG interfaces
SVGPoint
SVGRect
and
SVGMatrix
are aliasing the here defined
interfaces in favor for common interfaces used by SVG, Canvas 2D Context and CSS
Transforms.
[SVG11]
[HTML]
[CSS3-TRANSFORMS]
Tests
idlharness.any.js
(live test)
(source)
spec-examples.html
(live test)
(source)
2.
The DOMPoint interfaces
A 2D or a 3D
point
can be represented by the following WebIDL interfaces:
Exposed
=(
Window
Worker
),
Serializable
interface
DOMPointReadOnly
constructor
optional
unrestricted
double
= 0,
optional
unrestricted
double
= 0,
optional
unrestricted
double
= 0,
optional
unrestricted
double
= 1);

NewObject
static
DOMPointReadOnly
fromPoint
optional
DOMPointInit
other
= {});
readonly
attribute
unrestricted
double
readonly
attribute
unrestricted
double
readonly
attribute
unrestricted
double
readonly
attribute
unrestricted
double

NewObject
DOMPoint
matrixTransform
optional
DOMMatrixInit
matrix
= {});

Default
object
toJSON
();
};

Exposed
=(
Window
Worker
),
Serializable
LegacyWindowAlias
SVGPoint
interface
DOMPoint
DOMPointReadOnly
constructor
optional
unrestricted
double
= 0,
optional
unrestricted
double
= 0,
optional
unrestricted
double
= 0,
optional
unrestricted
double
= 1);

NewObject
static
DOMPoint
fromPoint
optional
DOMPointInit
other
= {});
inherit
attribute
unrestricted
double
inherit
attribute
unrestricted
double
inherit
attribute
unrestricted
double
inherit
attribute
unrestricted
double
};
dictionary
DOMPointInit
unrestricted
double
= 0;
unrestricted
double
= 0;
unrestricted
double
= 0;
unrestricted
double
= 1;
};
The following algorithms assume that
DOMPointReadOnly
objects have the internal member
variables
x coordinate
y coordinate
coordinate
and
w perspective
DOMPointReadOnly
as well as the inheriting interface
DOMPoint
must be able to access and set
the value of these variables.
An interface returning an
DOMPointReadOnly
object by an attribute or function may be able to
modify internal member variable values. Such an interface must specify this ability explicitly in
prose.
Internal member variables must not be exposed in any way.
The
DOMPointReadOnly(
and
DOMPoint(
constructors, when invoked, must run the following steps:
Let
point
be a new
DOMPointReadOnly
or
DOMPoint
object as appropriate.
Set
point
’s variables
x coordinate
to
y coordinate
to
z coordinate
to
and
w perspective
to
Return
point
Tests
DOMPoint-001.html
(live test)
(source)
The
fromPoint(
other
static method on
DOMPointReadOnly
must
create a
DOMPointReadOnly
from the dictionary
other
The
fromPoint(
other
static method on
DOMPoint
must
create a
DOMPoint
from the dictionary
other
To
create a
DOMPointReadOnly
from a dictionary
other
, or to
create a
DOMPoint
from a dictionary
other
, follow these
steps:
Let
point
be a new
DOMPointReadOnly
or
DOMPoint
as appropriate.
Set
point
’s variables
x coordinate
to
other
’s
dictionary member,
y coordinate
to
other
’s
dictionary member,
z coordinate
to
other
’s
dictionary member and
w perspective
to
other
’s
dictionary member.
Return
point
The
attribute, on getting, must return the
coordinate
value. For the
DOMPoint
interface, setting the
attribute must set the
x coordinate
to the new value.
The
attribute, on getting, must return the
coordinate
value. For the
DOMPoint
interface, setting the
attribute must set the
y coordinate
to the new value.
The
attribute, on getting, must return the
coordinate
value. For the
DOMPoint
interface, setting the
attribute must set the
z coordinate
to the new value.
The
attribute, on getting, must return the
perspective
value. For the
DOMPoint
interface, setting the
attribute must set the
w perspective
to the new value.
The
matrixTransform(
matrix
method, when invoked, must run the following steps:
Let
matrixObject
be the result of invoking
create a
DOMMatrix
from the dictionary
matrix
Return the result of invoking
transform a point with a matrix
, given the current
point and
matrixObject
. The current point does not get modified.
In this example the method
matrixTransform()
on a
DOMPoint
instance is
called with a
DOMMatrix
instance as argument.
var
point
new
DOMPoint
);
var
matrix
new
DOMMatrix
([
10
10
]);
var
transformedPoint
point
matrixTransform
matrix
);
The
point
variable is set to a new
DOMPoint
object with
coordinate
initialized to 5 and
y coordinate
initialized to 4. This new
DOMPoint
is now scaled and the translated by
matrix
. This resulting
transformedPoint
has the
x coordinate
20 and
coordinate
18.
Tests
DOMPoint-002.html
(live test)
(source)
2.1.
Transforming a point with a matrix
To
transform a
point
with a
matrix
, given
point
and
matrix
Let
be
point
’s
x coordinate
Let
be
point
’s
y coordinate
Let
be
point
’s
z coordinate
Let
be
point
’s
w perspective
Let
pointVector
be a new column vector with the elements being
, and
, respectively.
Set
pointVector
to
pointVector
pre-multiplied
by
matrix
Let
transformedPoint
be a new
DOMPoint
object.
Set
transformedPoint
’s
x coordinate
to
pointVector
’s
first element.
Set
transformedPoint
’s
y coordinate
to
pointVector
’s
second element.
Set
transformedPoint
’s
z coordinate
to
pointVector
’s
third element.
Set
transformedPoint
’s
w perspective
to
pointVector
’s
fourth element.
Return
transformedPoint
Note:
If
matrix
’s
is 2D
is true,
point
’s
z coordinate
is
or
-0
, and
point
’s
w perspective
is
, then this is a 2D transformation. Otherwise this is a 3D transformation.
3.
The DOMRect interfaces
Objects implementing the
DOMRectReadOnly
interface represent a
rectangle
Rectangles
have the following properties:
origin
When the rectangle has a non-negative
width dimension
, the rectangle’s
horizontal origin is the left edge; otherwise, it is the right edge. Similarly, when the rectangle
has a non-negative
height dimension
, the rectangle’s vertical origin is the
top edge; otherwise, it is the bottom edge.
x coordinate
The horizontal distance between the viewport’s left edge and the rectangle’s
origin
y coordinate
The vertical distance between the viewport’s top edge and the rectangle’s
origin
width dimension
The width of the rectangle. Can be negative.
height dimension
The height of the rectangle. Can be negative.
Exposed
=(
Window
Worker
),
Serializable
interface
DOMRectReadOnly
constructor
optional
unrestricted
double
= 0,
optional
unrestricted
double
= 0,
optional
unrestricted
double
width
= 0,
optional
unrestricted
double
height
= 0);

NewObject
static
DOMRectReadOnly
fromRect
optional
DOMRectInit
other
= {});
readonly
attribute
unrestricted
double
readonly
attribute
unrestricted
double
readonly
attribute
unrestricted
double
width
readonly
attribute
unrestricted
double
height
readonly
attribute
unrestricted
double
top
readonly
attribute
unrestricted
double
right
readonly
attribute
unrestricted
double
bottom
readonly
attribute
unrestricted
double
left

Default
object
toJSON
();
};

Exposed
=(
Window
Worker
),
Serializable
LegacyWindowAlias
SVGRect
interface
DOMRect
DOMRectReadOnly
constructor
optional
unrestricted
double
= 0,
optional
unrestricted
double
= 0,
optional
unrestricted
double
width
= 0,
optional
unrestricted
double
height
= 0);

NewObject
static
DOMRect
fromRect
optional
DOMRectInit
other
= {});
inherit
attribute
unrestricted
double
inherit
attribute
unrestricted
double
inherit
attribute
unrestricted
double
width
inherit
attribute
unrestricted
double
height
};
dictionary
DOMRectInit
unrestricted
double
= 0;
unrestricted
double
= 0;
unrestricted
double
width
= 0;
unrestricted
double
height
= 0;
};
The following algorithms assume that
DOMRectReadOnly
objects have the internal member
variables
x coordinate
y coordinate
width dimension
and
height dimension
DOMRectReadOnly
as
well as the inheriting interface
DOMRect
must be able to access and set the value of these
variables.
An interface returning an
DOMRectReadOnly
object by an attribute or function may be able to
modify internal member variable values. Such an interface must specify this ability explicitly in
prose.
Internal member variables must not be exposed in any way.
The
DOMRectReadOnly(
width
height
and
DOMRect(
width
height
constructors, when invoked, must run the following steps:
Let
rect
be a new
DOMRectReadOnly
or
DOMRect
object as appropriate.
Set
rect
’s variables
x coordinate
to
y coordinate
to
width dimension
to
width
and
height dimension
to
height
Return
rect
The
fromRect(
other
static method on
DOMRectReadOnly
must
create a
DOMRectReadOnly
from the dictionary
other
The
fromRect(
other
static method on
DOMRect
must
create a
DOMRect
from the dictionary
other
To
create a
DOMRectReadOnly
from a dictionary
other
, or to
create a
DOMRect
from a dictionary
other
, follow these
steps:
Let
rect
be a new
DOMRectReadOnly
or
DOMRect
as appropriate.
Set
rect
’s variables
x coordinate
to
other
’s
dictionary member,
y coordinate
to
other
’s
dictionary member,
width dimension
to
other
’s
width
dictionary member and
height dimension
to
other
’s
height
dictionary member.
Return
rect
The
attribute, on getting, must return the
coordinate
value. For the
DOMRect
interface, setting the
attribute must set the
x coordinate
to the new value.
The
attribute, on getting, it must return the
coordinate
value. For the
DOMRect
interface, setting the
attribute must set the
y coordinate
to the new value.
The
width
attribute, on getting, must return the
width
dimension
value. For the
DOMRect
interface, setting the
width
attribute must set the
width dimension
to the new value.
The
height
attribute, on getting, must return the
height dimension
value. For the
DOMRect
interface, setting the
height
attribute must set the
height dimension
value to the new
value.
The
top
attribute, on getting, must return the
NaN-safe minimum
of
the
y coordinate
and the sum of the
y coordinate
and the
height dimension
The
right
attribute, on getting, must return the
NaN-safe maximum
of
the
x coordinate
and the sum of the
x coordinate
and the
width dimension
The
bottom
attribute, on getting, must return the
NaN-safe maximum
of the
y coordinate
and the sum of the
y coordinate
and
the
height dimension
The
left
attribute, on getting, must return the
NaN-safe minimum
of
the
x coordinate
and the sum of the
x coordinate
and the
width dimension
Tests
DOMRect-001.html
(live test)
(source)
DOMRect-002.html
(live test)
(source)
DOMRect-nan.html
(live test)
(source)
4.
The DOMRectList interface
Exposed
Window
interface
DOMRectList
readonly
attribute
unsigned
long
length
getter
DOMRect
item
unsigned
long
index
);
};
The
length
attribute must return the total
number of
DOMRect
objects associated with the object.
The
item(
index
method, when invoked, must
return
null
when
index
is greater than or equal to the number of
DOMRect
objects
associated with the
DOMRectList
. Otherwise, the
DOMRect
object at
index
must be
returned. Indices are zero-based.
DOMRectList
only exists for compatibility with legacy Web content. When specifying a
new API,
DOMRectList
must not be used. Use
sequence
instead.
[WEBIDL]
Tests
DOMRectList.html
(live test)
(source)
5.
The DOMQuad interface
Objects implementing the
DOMQuad
interface represents a
quadrilateral
Exposed
=(
Window
Worker
),
Serializable
interface
DOMQuad
constructor
optional
DOMPointInit
p1
= {},
optional
DOMPointInit
p2
= {},
optional
DOMPointInit
p3
= {},
optional
DOMPointInit
p4
= {});

NewObject
static
DOMQuad
fromRect
optional
DOMRectInit
other
= {});
NewObject
static
DOMQuad
fromQuad
optional
DOMQuadInit
other
= {});

SameObject
readonly
attribute
DOMPoint
p1
SameObject
readonly
attribute
DOMPoint
p2
SameObject
readonly
attribute
DOMPoint
p3
SameObject
readonly
attribute
DOMPoint
p4
NewObject
DOMRect
getBounds
();

Default
object
toJSON
();
};
dictionary
DOMQuadInit
DOMPointInit
p1
DOMPointInit
p2
DOMPointInit
p3
DOMPointInit
p4
};
The following algorithms assume that
DOMQuad
objects have the internal member variables
point 1
point 2
point
, and
point 4
, which are
DOMPoint
objects.
DOMQuad
must be able to access and set the value of these variables. The
author can modify these
DOMPoint
objects, which directly affects the quadrilateral.
An interface returning a
DOMQuad
object by an attribute or function may be able to modify
internal member variable values. Such an interface must specify this ability explicitly in prose.
Internal member variables must not be exposed in any way.
The
DOMQuad(
p1
p2
p3
p4
constructor, when invoked, must run the following steps:
Let
point1
be a new
DOMPoint
object with its attributes set to the values of
the namesake dictionary members in
p1
Let
point2
be a new
DOMPoint
object with its attributes set to the values of
the namesake dictionary members in
p2
Let
point3
be a new
DOMPoint
object with its attributes set to the values of
the namesake dictionary members in
p3
Let
point4
be a new
DOMPoint
object with its attributes set to the values of
the namesake dictionary members in
p4
Return a new
DOMQuad
with
point 1
set to
point1
point 2
set to
point2
point 3
set to
point3
and
point 4
set to
point4
Note:
It is possible to pass
DOMPoint
DOMPointReadOnly
arguments as well. The passed
arguments will be transformed to the correct object type internally following the WebIDL rules.
[WEBIDL]
The
fromRect(
other
static method on
DOMQuad
must
create a
DOMQuad
from the
DOMRectInit
dictionary
other
To
create a
DOMQuad
from
DOMRectInit
dictionary
other
, follow these steps:
Let
width
and
height
be the value of
other
’s
width
and
height
dictionary members, respectively.
Let
point1
be a new
DOMPoint
object with
x coordinate
set to
y coordinate
set to
z coordinate
set
to
and
w perspective
set to
Let
point2
be a new
DOMPoint
object with
x coordinate
set to
width
y coordinate
set to
coordinate
set to
and
w perspective
set to
Let
point3
be a new
DOMPoint
object with
x coordinate
set to
width
y coordinate
set to
height
z coordinate
set to
and
w perspective
set to
Let
point4
be a new
DOMPoint
object with
x coordinate
set to
y coordinate
set to
height
coordinate
set to
and
w perspective
set to
Return a new
DOMQuad
with
point 1
set to
point1
point 2
set to
point2
point 3
set to
point3
and
point 4
set to
point4
The
fromQuad(
other
static method on
DOMQuad
must
create a
DOMQuad
from the
DOMQuadInit
dictionary
other
To
create a
DOMQuad
from
DOMQuadInit
dictionary
other
, follow these steps:
Let
point1
be the result of invoking
create a
DOMPoint
from the
dictionary
p1
dictionary member of
other
, if it exists.
Let
point2
be the result of invoking
create a
DOMPoint
from the
dictionary
p2
dictionary member of
other
, if it exists.
Let
point3
be the result of invoking
create a
DOMPoint
from the
dictionary
p3
dictionary member of
other
, if it exists.
Let
point4
be the result of invoking
create a
DOMPoint
from the
dictionary
p4
dictionary member of
other
, if it exists.
Return a new
DOMQuad
with
point 1
set to
point1
point 2
set to
point2
point 3
set to
point3
and
point 4
set to
point4
The
p1
attribute must return
point 1
The
p2
attribute must return
point 2
The
p3
attribute must return
point 3
The
p4
attribute must return
point 4
The
getBounds()
method, when invoked, must run the following
algorithm:
Let
bounds
be a
DOMRect
object.
Let
left
be the
NaN-safe minimum
of
point 1
’s
x coordinate
point 2
’s
x coordinate
point 3
’s
x coordinate
and
point
’s
x coordinate
Let
top
be the
NaN-safe minimum
of
point 1
’s
y coordinate
point 2
’s
y coordinate
point 3
’s
y coordinate
and
point
’s
y coordinate
Let
right
be the
NaN-safe maximum
of
point 1
’s
x coordinate
point 2
’s
x coordinate
point 3
’s
x coordinate
and
point
’s
x coordinate
Let
bottom
be the
NaN-safe maximum
of
point 1
’s
y coordinate
point 2
’s
y coordinate
point 3
’s
y coordinate
and
point
’s
y coordinate
Set
x coordinate
of
bounds
to
left
y coordinate
of
bounds
to
top
width
dimension
of
bounds
to
right
left
and
height dimension
of
bounds
to
bottom
top
Return
bounds
Tests
DOMQuad-001.html
(live test)
(source)
DOMQuad-002.html
(live test)
(source)
DOMQuad-nan.html
(live test)
(source)
In this example the
DOMQuad
constructor is called with arguments of type
DOMPoint
and
DOMPointInit
. Both arguments are accepted and can be used.
var
point
new
DOMPoint
);
var
quad1
new
DOMQuad
point
12
},
12
10
},
10
});
The attribute values of the resulting
DOMQuad
quad1
above are also
equivalent to the attribute values of the following
DOMQuad
quad2
var
rect
new
DOMRect
10
10
);
var
quad2
DOMQuad
fromRect
rect
);
This is an example of an irregular quadrilateral:
new
DOMQuad
({
40
25
},
180
},
210
150
},
10
180
});
An irregular quadrilateral represented by a
DOMQuad
. The four red colored
circles represent the
DOMPoint
attributes
p1
to
p4
. The dashed
rectangle represents the bounding rectangle returned by the
getBounds()
method of the
DOMQuad
6.
The DOMMatrix interfaces
The
DOMMatrix
and
DOMMatrixReadOnly
interfaces each represent a mathematical
matrix
with the purpose of describing transformations in a graphical
context. The following sections describe the details of the interface.
11
21
31
41
12
22
32
42
13
23
33
43
14
24
34
44
4x4 abstract matrix
with items
11
to
44
In the following sections, terms have the following meaning:
post-multiply
Term
post-multiplied by term
is equal to
pre-multiply
Term
pre-multiplied by term
is equal to
multiply
Multiply term
by term
is equal to
Exposed
=(
Window
Worker
),
Serializable
interface
DOMMatrixReadOnly
constructor
optional
DOMString
or
sequence
unrestricted
double
>)
init
);

NewObject
static
DOMMatrixReadOnly
fromMatrix
optional
DOMMatrixInit
other
= {});
NewObject
static
DOMMatrixReadOnly
fromFloat32Array
Float32Array
array32
);
NewObject
static
DOMMatrixReadOnly
fromFloat64Array
Float64Array
array64
);

// These attributes are simple aliases for certain elements of the 4x4 matrix
readonly
attribute
unrestricted
double
readonly
attribute
unrestricted
double
readonly
attribute
unrestricted
double
readonly
attribute
unrestricted
double
readonly
attribute
unrestricted
double
readonly
attribute
unrestricted
double
readonly
attribute
unrestricted
double
m11
readonly
attribute
unrestricted
double
m12
readonly
attribute
unrestricted
double
m13
readonly
attribute
unrestricted
double
m14
readonly
attribute
unrestricted
double
m21
readonly
attribute
unrestricted
double
m22
readonly
attribute
unrestricted
double
m23
readonly
attribute
unrestricted
double
m24
readonly
attribute
unrestricted
double
m31
readonly
attribute
unrestricted
double
m32
readonly
attribute
unrestricted
double
m33
readonly
attribute
unrestricted
double
m34
readonly
attribute
unrestricted
double
m41
readonly
attribute
unrestricted
double
m42
readonly
attribute
unrestricted
double
m43
readonly
attribute
unrestricted
double
m44
readonly
attribute
boolean
is2D
readonly
attribute
boolean
isIdentity

// Immutable transform methods
NewObject
DOMMatrix
translate
optional
unrestricted
double
tx
= 0,
optional
unrestricted
double
ty
= 0,
optional
unrestricted
double
tz
= 0);
NewObject
DOMMatrix
scale
optional
unrestricted
double
scaleX
= 1,
optional
unrestricted
double
scaleY
optional
unrestricted
double
scaleZ
= 1,
optional
unrestricted
double
originX
= 0,
optional
unrestricted
double
originY
= 0,
optional
unrestricted
double
originZ
= 0);
NewObject
DOMMatrix
scaleNonUniform
optional
unrestricted
double
scaleX
= 1,
optional
unrestricted
double
scaleY
= 1);
NewObject
DOMMatrix
scale3d
optional
unrestricted
double
scale
= 1,
optional
unrestricted
double
originX
= 0,
optional
unrestricted
double
originY
= 0,
optional
unrestricted
double
originZ
= 0);
NewObject
DOMMatrix
rotate
optional
unrestricted
double
rotX
= 0,
optional
unrestricted
double
rotY
optional
unrestricted
double
rotZ
);
NewObject
DOMMatrix
rotateFromVector
optional
unrestricted
double
= 0,
optional
unrestricted
double
= 0);
NewObject
DOMMatrix
rotateAxisAngle
optional
unrestricted
double
= 0,
optional
unrestricted
double
= 0,
optional
unrestricted
double
= 0,
optional
unrestricted
double
angle
= 0);
NewObject
DOMMatrix
skewX
optional
unrestricted
double
sx
= 0);
NewObject
DOMMatrix
skewY
optional
unrestricted
double
sy
= 0);
NewObject
DOMMatrix
multiply
optional
DOMMatrixInit
other
= {});
NewObject
DOMMatrix
flipX
();
NewObject
DOMMatrix
flipY
();
NewObject
DOMMatrix
inverse
();

NewObject
DOMPoint
transformPoint
optional
DOMPointInit
point
= {});
NewObject
Float32Array
toFloat32Array
();
NewObject
Float64Array
toFloat64Array
();

Exposed
Window
stringifier
Default
object
toJSON
();
};

Exposed
=(
Window
Worker
),
Serializable
LegacyWindowAlias
=(
SVGMatrix
WebKitCSSMatrix
)]
interface
DOMMatrix
DOMMatrixReadOnly
constructor
optional
DOMString
or
sequence
unrestricted
double
>)
init
);

NewObject
static
DOMMatrix
fromMatrix
optional
DOMMatrixInit
other
= {});
NewObject
static
DOMMatrix
fromFloat32Array
Float32Array
array32
);
NewObject
static
DOMMatrix
fromFloat64Array
Float64Array
array64
);

// These attributes are simple aliases for certain elements of the 4x4 matrix
inherit
attribute
unrestricted
double
inherit
attribute
unrestricted
double
inherit
attribute
unrestricted
double
inherit
attribute
unrestricted
double
inherit
attribute
unrestricted
double
inherit
attribute
unrestricted
double
inherit
attribute
unrestricted
double
m11
inherit
attribute
unrestricted
double
m12
inherit
attribute
unrestricted
double
m13
inherit
attribute
unrestricted
double
m14
inherit
attribute
unrestricted
double
m21
inherit
attribute
unrestricted
double
m22
inherit
attribute
unrestricted
double
m23
inherit
attribute
unrestricted
double
m24
inherit
attribute
unrestricted
double
m31
inherit
attribute
unrestricted
double
m32
inherit
attribute
unrestricted
double
m33
inherit
attribute
unrestricted
double
m34
inherit
attribute
unrestricted
double
m41
inherit
attribute
unrestricted
double
m42
inherit
attribute
unrestricted
double
m43
inherit
attribute
unrestricted
double
m44

// Mutable transform methods
DOMMatrix
multiplySelf
optional
DOMMatrixInit
other
= {});
DOMMatrix
preMultiplySelf
optional
DOMMatrixInit
other
= {});
DOMMatrix
translateSelf
optional
unrestricted
double
tx
= 0,
optional
unrestricted
double
ty
= 0,
optional
unrestricted
double
tz
= 0);
DOMMatrix
scaleSelf
optional
unrestricted
double
scaleX
= 1,
optional
unrestricted
double
scaleY
optional
unrestricted
double
scaleZ
= 1,
optional
unrestricted
double
originX
= 0,
optional
unrestricted
double
originY
= 0,
optional
unrestricted
double
originZ
= 0);
DOMMatrix
scale3dSelf
optional
unrestricted
double
scale
= 1,
optional
unrestricted
double
originX
= 0,
optional
unrestricted
double
originY
= 0,
optional
unrestricted
double
originZ
= 0);
DOMMatrix
rotateSelf
optional
unrestricted
double
rotX
= 0,
optional
unrestricted
double
rotY
optional
unrestricted
double
rotZ
);
DOMMatrix
rotateFromVectorSelf
optional
unrestricted
double
= 0,
optional
unrestricted
double
= 0);
DOMMatrix
rotateAxisAngleSelf
optional
unrestricted
double
= 0,
optional
unrestricted
double
= 0,
optional
unrestricted
double
= 0,
optional
unrestricted
double
angle
= 0);
DOMMatrix
skewXSelf
optional
unrestricted
double
sx
= 0);
DOMMatrix
skewYSelf
optional
unrestricted
double
sy
= 0);
DOMMatrix
invertSelf
();

Exposed
Window
DOMMatrix
setMatrixValue
DOMString
transformList
);
};
dictionary
DOMMatrix2DInit
unrestricted
double
unrestricted
double
unrestricted
double
unrestricted
double
unrestricted
double
unrestricted
double
unrestricted
double
m11
unrestricted
double
m12
unrestricted
double
m21
unrestricted
double
m22
unrestricted
double
m41
unrestricted
double
m42
};
dictionary
DOMMatrixInit
DOMMatrix2DInit
unrestricted
double
m13
= 0;
unrestricted
double
m14
= 0;
unrestricted
double
m23
= 0;
unrestricted
double
m24
= 0;
unrestricted
double
m31
= 0;
unrestricted
double
m32
= 0;
unrestricted
double
m33
= 1;
unrestricted
double
m34
= 0;
unrestricted
double
m43
= 0;
unrestricted
double
m44
= 1;
boolean
is2D
};
The following algorithms assume that
DOMMatrixReadOnly
objects have the internal member
variables
m11 element
m12 element
m13 element
m14 element
m21
element
m22 element
m23 element
m24 element
m31 element
m32
element
m33 element
m34 element
m41 element
m42 element
m43
element
m44 element
and
is 2D
DOMMatrixReadOnly
as well as the inheriting interface
DOMMatrix
must be able to access and
set the value of these variables.
An interface returning an
DOMMatrixReadOnly
object by an attribute or function may be able to
modify internal member variable values. Such an interface must specify this ability explicitly in
prose.
Internal member variables must not be exposed in any way.
The
DOMMatrix
and
DOMMatrixReadOnly
interfaces replace the
SVGMatrix
interface from SVG.
[SVG11]
Tests
WebKitCSSMatrix.html
(live test)
(source)
WebKitCSSMatrix.worker.js
(live test)
(source)
6.1.
DOMMatrix2DInit and DOMMatrixInit dictionaries
To
validate and fixup (2D)
DOMMatrix2DInit
or
DOMMatrixInit
dictionary
dict
, run the following steps:
If if at least one of the following conditions are true for
dict
, then throw a
TypeError
exception and abort these steps.
and
m11
are both present and
SameValueZero
m11
) is
false
and
m12
are both present and
SameValueZero
m12
) is
false
and
m21
are both present and
SameValueZero
m21
) is
false
and
m22
are both present and
SameValueZero
m22
) is
false
and
m41
are both present and
SameValueZero
m41
) is
false
and
m42
are both present and
SameValueZero
m42
) is
false
If
m11
is not present then set it to the value of member
, or value
if
is also not present.
If
m12
is not present then set it to the value of member
, or value
if
is also not present.
If
m21
is not present then set it to the value of member
, or value
if
is also not present.
If
m22
is not present then set it to the value of member
, or value
if
is also not present.
If
m41
is not present then set it to the value of member
, or value
if
is also not present.
If
m42
is not present then set it to the value of member
, or value
if
is also not present.
Note:
The
SameValueZero
comparison algorithm returns
true
for two
NaN
values, and also for
and
-0
[ECMA-262]
To
validate and fixup
DOMMatrixInit
dictionary
dict
run the following steps:
Validate and fixup (2D)
dict
If
is2D
is
true
and: at least one of
m13
m14
m23
m24
m31
m32
m34
m43
are present with a value other
than
or
-0
, or at least one of
m33
m44
are present
with a value other than
, then throw a
TypeError
exception and abort these steps.
If
is2D
is not present and at least one of
m13
m14
m23
m24
m31
m32
m34
m43
are present with a value other
than
or
-0
, or at least one of
m33
m44
are present
with a value other than
, set
is2D
to
false
If
is2D
is still not present, set it to
true
Tests
DOMMatrix2DInit-validate-fixup.html
(live test)
(source)
DOMMatrixInit-validate-fixup.html
(live test)
(source)
6.2.
Parsing a string into an abstract matrix
To
parse a string into an abstract matrix
, given a string
transformList
means to run the following steps. It will either return a
4x4 abstract matrix
and a boolean
2dTransform
, or failure.
If
transformList
is the empty string, set it to the string "
matrix(1, 0, 0,
1, 0, 0)
".
Parse
transformList
into
parsedValue
given the grammar
for the CSS
transform
property. The result will be a

, the keyword
none
, or failure. If
parsedValue
is failure, or any

has

values without
absolute length
units, or any keyword other
than
none
is used, then return failure.
[CSS3-SYNTAX]
[CSS3-TRANSFORMS]
If
parsedValue
is
none
, set
parsedValue
to a

containing a single identity matrix.
Let
2dTransform
track the 2D/3D dimension status of
parsedValue
If
parsedValue
consists of any
three-dimensional
transform functions
Set
2dTransform
to
false
Otherwise
Set
2dTransform
to
true
Transform all

s to
4x4 abstract
matrices
by following the “
Mathematical Description
of Transform Functions
”.
[CSS3-TRANSFORMS]
Let
matrix
be a
4x4 abstract matrix
as shown in the initial
figure of this section.
Post-multiply
all matrices from left to right and set
matrix
to this product.
Return
matrix
and
2dTransform
6.3.
Creating DOMMatrixReadOnly and DOMMatrix objects
To
create a 2d matrix
of type
type
being either
DOMMatrixReadOnly
or
DOMMatrix
, with a sequence
init
of 6 elements, follow these steps:
Let
matrix
be a new instance of
type
Set
m11 element
m12 element
m21
element
m22 element
m41 element
and
m42
element
to the values of
init
in order starting with the first value.
Set
m13 element
m14 element
m23
element
m24 element
m31 element
m32
element
m34 element
, and
m43 element
to
Set
m33 element
and
m44 element
to
Set
is 2D
to
true
Return
matrix
To
create a 3d matrix
with
type
being either
DOMMatrixReadOnly
or
DOMMatrix
, with a sequence
init
of 16 elements, follow these steps:
Let
matrix
be a new instance of
type
Set
m11 element
to
m44 element
to the values of
init
in column-major order.
Set
is 2D
to
false
Return
matrix
The
DOMMatrixReadOnly(
init
and the
DOMMatrix(
init
constructors
must follow these steps:
If
init
is omitted
Return the result of invoking
create a 2d matrix
of type
DOMMatrixReadOnly
or
DOMMatrix
as appropriate, with the sequence [
].
If
init
is a
DOMString
If
current global object
is not a
Window
object, then throw a
TypeError
exception.
Parse
init
into an abstract
matrix
, and let
matrix
and
2dTransform
be the result. If the result is
failure, then throw a "
SyntaxError
DOMException
If
2dTransform
is
true
Return the result of invoking
create a 2d matrix
of type
DOMMatrixReadOnly
or
DOMMatrix
as appropriate, with a sequence of numbers, the values being the elements
m11
m12
m21
m22
m41
and
m42
of
matrix
Otherwise
Return the result of invoking
create a 3d matrix
of type
DOMMatrixReadOnly
or
DOMMatrix
as appropriate, with a sequence of numbers, the values being the 16 elements of
matrix
If
init
is a sequence with 6 elements
Return the result of invoking
create a 2d matrix
of type
DOMMatrixReadOnly
or
DOMMatrix
as appropriate, with the sequence
init
If
init
is a sequence with 16 elements
Return the result of invoking
create a 3d matrix
of type
DOMMatrixReadOnly
or
DOMMatrix
as appropriate, with the sequence
init
Otherwise
Throw a
TypeError
exception.
Tests
DOMMatrix-001.html
(live test)
(source)
The
fromMatrix(
other
static method on
DOMMatrixReadOnly
must
create a
DOMMatrixReadOnly
from the dictionary
other
The
fromMatrix(
other
static method on
DOMMatrix
must
create a
DOMMatrix
from the dictionary
other
To
create a
DOMMatrixReadOnly
from a 2D dictionary
other
or to
create a
DOMMatrix
from a 2D dictionary
other
, follow these steps:
Validate and fixup (2D)
other
Return the result of invoking
create a 2d matrix
of type
DOMMatrixReadOnly
or
DOMMatrix
as appropriate, with a sequence of numbers, the values being the 6 elements
m11
m12
m21
m22
m41
and
m42
of
other
in the given order.
To
create a
DOMMatrixReadOnly
from a dictionary
other
or to
create a
DOMMatrix
from a dictionary
other
, follow these steps:
Validate and fixup
other
If the
is2D
dictionary member of
other
is
true
Return the result of invoking
create a 2d matrix
of type
DOMMatrixReadOnly
or
DOMMatrix
as appropriate, with a sequence of numbers, the values being the 6 elements
m11
m12
m21
m22
m41
and
m42
of
other
in the given order.
Otherwise
Return the result of invoking
create a 3d matrix
of type
DOMMatrixReadOnly
or
DOMMatrix
as appropriate, with a sequence of numbers, the values being the 16 elements
m11
m12
m13
, ...,
m44
of
other
in the given order.
The
fromFloat32Array(
array32
static method on
DOMMatrixReadOnly
and the
fromFloat32Array(
array32
static
method on
DOMMatrix
must follow these steps:
If
array32
has 6 elements
Return the result of invoking
create a 2d matrix
of type
DOMMatrixReadOnly
or
DOMMatrix
as appropriate, with a sequence of numbers taking the values from
array32
in the provided order.
If
array32
has 16 elements
Return the result of invoking
create a 3d matrix
of type
DOMMatrixReadOnly
or
DOMMatrix
as appropriate, with a sequence of numbers taking the values from
array32
in the provided order.
Otherwise
Throw a
TypeError
exception.
The
fromFloat64Array(
array64
static method on
DOMMatrixReadOnly
and the
fromFloat64Array(
array64
static
method on
DOMMatrix
must follow these steps:
If
array64
has 6 elements
Return the result of invoking
create a 2d matrix
of type
DOMMatrixReadOnly
or
DOMMatrix
as appropriate, with a sequence of numbers taking the values from
array64
in the provided order.
If
array32
has 16 elements
Return the result of invoking
create a 3d matrix
of type
DOMMatrixReadOnly
or
DOMMatrix
as appropriate, with a sequence of numbers taking the values from
array64
in the provided order.
Otherwise
Throw a
TypeError
exception.
6.4.
DOMMatrix attributes
The following attributes
m11
to
m44
correspond to the
16 items of the matrix interfaces.
The
m11
and
attributes, on getting, must
return the
m11 element
value. For the
DOMMatrix
interface, setting the
m11
or the
attribute must set the
m11 element
to
the new value.
The
m12
and
attributes, on getting, must
return the
m12 element
value. For the
DOMMatrix
interface, setting the
m12
or the
attribute must set the
m12 element
to
the new value.
The
m13
attribute, on getting, must return the
m13
element
value. For the
DOMMatrix
interface, setting the
m13
attribute must
set the
m13 element
to the new value and, if the new value is not
or
-0
, set
is 2D
to
false
The
m14
attribute, on getting, must return the
m14
element
value. For the
DOMMatrix
interface, setting the
m14
attribute must
set the
m14 element
to the new value and, if the new value is not
or
-0
, set
is 2D
to
false
The
m21
and
attributes, on getting, must
return the
m21 element
value. For the
DOMMatrix
interface, setting the
m21
or the
attribute must set the
m21 element
to
the new value.
The
m22
and
attributes, on getting, must
return the
m22 element
value. For the
DOMMatrix
interface, setting the
m22
or the
attribute must set the
m22 element
to
the new value.
The
m23
attribute, on getting, must return the
m23
element
value. For the
DOMMatrix
interface, setting the
m23
attribute must
set the
m23 element
to the new value and, if the new value is not
or
-0
, set
is 2D
to
false
The
m24
attribute, on getting, must return the
m24
element
value. For the
DOMMatrix
interface, setting the
m24
attribute must
set the
m24 element
to the new value and, if the new value is not
or
-0
, set
is 2D
to
false
The
m31
attribute, on getting, must return the
m31
element
value. For the
DOMMatrix
interface, setting the
m31
attribute must
set the
m31 element
to the new value and, if the new value is not
or
-0
, set
is 2D
to
false
The
m32
attribute, on getting, must return the
m32
element
value. For the
DOMMatrix
interface, setting the
m32
attribute must
set the
m32 element
to the new value and, if the new value is not
or
-0
, set
is 2D
to
false
The
m33
attribute, on getting, must return the
m33
element
value. For the
DOMMatrix
interface, setting the
m33
attribute must
set the
m33 element
to the new value and, if the new value is not
, set
is 2D
to
false
The
m34
attribute, on getting, must return the
m34
element
value. For the
DOMMatrix
interface, setting the
m34
attribute must
set the
m34 element
to the new value and, if the new value is not
or
-0
, set
is 2D
to
false
The
m41
and
attributes, on getting, must
return the
m41 element
value. For the
DOMMatrix
interface, setting the
m41
or the
attribute must set the
m41 element
to
the new value.
The
m42
and
attributes, on getting, must
return the
m42 element
value. For the
DOMMatrix
interface, setting the
m42
or the
attribute must set the
m42 element
to
the new value.
The
m43
attribute, on getting, must return the
m43
element
value. For the
DOMMatrix
interface, setting the
m43
attribute must
set the
m43 element
to the new value and, if the new value is not
or
-0
, set
is 2D
to
false
The
m44
attribute, on getting, must return the
m44
element
value. For the
DOMMatrix
interface, setting the
m44
attribute must
set the
m44 element
to the new value and, if the new value is not
, set
is 2D
to
false
The following attributes
to
correspond to the 2D
components of the matrix interfaces.
The
attribute is an alias to the
m11
attribute.
The
attribute is an alias to the
m12
attribute.
The
attribute is an alias to the
m21
attribute.
The
attribute is an alias to the
m22
attribute.
The
attribute is an alias to the
m41
attribute.
The
attribute is an alias to the
m42
attribute.
Tests
DOMMatrix-a-f-alias.html
(live test)
(source)
DOMMatrix-attributes.html
(live test)
(source)
The following attributes provide status information about
DOMMatrixReadOnly
The
is2D
attribute must return the value of
is 2D
The
isIdentity
attribute must return
true
if
m12 element
m13 element
m14 element
m21 element
m23 element
m24 element
m31 element
m32 element
m34 element
m41 element
m42 element
m43 element
are
or
-0
and
m11 element
m22 element
m33
element
m44 element
are
. Otherwise it must return
false
Every
DOMMatrixReadOnly
object must be flagged with a boolean
is 2D
. This flag indicates that:
The current matrix was initialized as a 2D matrix. See individual
creators
for more details.
Only 2D transformation operations were applied. Each
mutable
or
immutable transformation method
defines if
is 2D
must be set to
false
Note:
Is 2D
can never be set to
true
when it was set to
false
before on a
DOMMatrix
object with the exception of calling the
setMatrixValue()
method.
6.5.
Immutable transformation methods
The following methods do not modify the current matrix and return a new
DOMMatrix
object.
translate(
tx
ty
tz
Let
result
be the resulting matrix initialized to the values of the current
matrix.
Perform a
translateSelf()
transformation on
result
with the
arguments
tx
ty
tz
Return
result
The current matrix is not modified.
scale(
scaleX
scaleY
scaleZ
originX
originY
originZ
If
scaleY
is missing, set
scaleY
to the value of
scaleX
Let
result
be the resulting matrix initialized to the values of the current
matrix.
Perform a
scaleSelf()
transformation on
result
with the arguments
scaleX
scaleY
scaleZ
originX
originY
originZ
Return
result
The current matrix is not modified.
scaleNonUniform(
scaleX
scaleY
Note:
Supported for legacy reasons to be compatible with
SVGMatrix
as defined in SVG 1.1
[SVG11]
. Authors are encouraged to use
scale()
instead.
Let
result
be the resulting matrix initialized to the values of the current
matrix.
Perform a
scaleSelf()
transformation on
result
with the arguments
scaleX
scaleY
Return
result
The current matrix is not modified.
scale3d(
scale
originX
originY
originZ
Let
result
be the resulting matrix initialized to the values of the current
matrix.
Perform a
scale3dSelf()
transformation on
result
with the
arguments
scale
originX
originY
originZ
Return
result
The current matrix is not modified.
rotate(
rotX
rotY
rotZ
Let
result
be the resulting matrix initialized to the values of the current
matrix.
Perform a
rotateSelf()
transformation on
result
with the
arguments
rotX
rotY
rotZ
Return
result
The current matrix is not modified.
rotateFromVector(
Let
result
be the resulting matrix initialized to the values of the current
matrix.
Perform a
rotateFromVectorSelf()
transformation on
result
with
the arguments
Return
result
The current matrix is not modified.
rotateAxisAngle(
angle
Let
result
be the resulting matrix initialized to the values of the current
matrix.
Perform a
rotateAxisAngleSelf()
transformation on
result
with the
arguments
angle
Return
result
The current matrix is not modified.
skewX(
sx
Let
result
be the resulting matrix initialized to the values of the current
matrix.
Perform a
skewXSelf()
transformation on
result
with the argument
sx
Return
result
The current matrix is not modified.
skewY(
sy
Let
result
be the resulting matrix initialized to the values of the current
matrix.
Perform a
skewYSelf()
transformation on
result
with the argument
sy
Return
result
The current matrix is not modified.
multiply(
other
Let
result
be the resulting matrix initialized to the values of the current
matrix.
Perform a
multiplySelf()
transformation on
result
with the
argument
other
Return
result
The current matrix is not modified.
flipX()
Let
result
be the resulting matrix initialized to the values of the current
matrix.
Post-multiply
result
with
new DOMMatrix([-1, 0, 0, 1, 0,
0])
Return
result
The current matrix is not modified.
flipY()
Let
result
be the resulting matrix initialized to the values of the current
matrix.
Post-multiply
result
with
new DOMMatrix([1, 0, 0, -1, 0,
0])
Return
result
The current matrix is not modified.
inverse()
Let
result
be the resulting matrix initialized to the values of the current
matrix.
Perform a
invertSelf()
transformation on
result
Return
result
The current matrix is not modified.
Tests
DOMMatrix-002.html
(live test)
(source)
DOMMatrix-newobject.html
(live test)
(source)
The following methods do not modify the current matrix.
transformPoint(
point
Let
pointObject
be the result of invoking
create a
DOMPoint
from the
dictionary
point
. Return the result of invoking
transform a point with a
matrix
, given
pointObject
and the current matrix. The passed argument does not get
modified.
toFloat32Array()
Returns the serialized 16 elements
m11
to
m44
of
the current matrix in column-major order as
Float32Array
toFloat64Array()
Returns the serialized 16 elements
m11
to
m44
of
the current matrix in column-major order as
Float64Array
stringification behavior
If one or more of
m11 element
through
m44 element
are a
non-finite value, then throw an "
InvalidStateError
DOMException
Note:
The CSS syntax cannot represent
NaN
or
Infinity
values.
Let
string
be the empty string.
If
is 2D
is
true
, then:
Append "
matrix(
" to
string
Append
ToString
m11 element
) to
string
Append "
" to
string
Append
ToString
m12 element
) to
string
Append "
" to
string
Append
ToString
m21 element
) to
string
Append "
" to
string
Append
ToString
m22 element
) to
string
Append "
" to
string
Append
ToString
m41 element
) to
string
Append "
" to
string
Append
ToString
m42 element
) to
string
Append "
" to
string
Note:
The string will be in the form of a a CSS Transforms

function.
[CSS3-TRANSFORMS]
Otherwise:
Append "
matrix3d(
" to
string
Append
ToString
m11 element
) to
string
Append "
" to
string
Append
ToString
m12 element
) to
string
Append "
" to
string
Append
ToString
m13 element
) to
string
Append "
" to
string
Append
ToString
m14 element
) to
string
Append "
" to
string
Append
ToString
m21 element
) to
string
Append "
" to
string
Append
ToString
m22 element
) to
string
Append "
" to
string
Append
ToString
m23 element
) to
string
Append "
" to
string
Append
ToString
m24 element
) to
string
Append "
" to
string
Append
ToString
m41 element
) to
string
Append "
" to
string
Append
ToString
m42 element
) to
string
Append "
" to
string
Append
ToString
m43 element
) to
string
Append "
" to
string
Append
ToString
m44 element
) to
string
Append "
" to
string
Note:
The string will be in the form of a a CSS Transforms

function.
[CSS3-TRANSFORMS]
Return
string
Tests
DOMMatrix-stringifier.html
(live test)
(source)
Tests
DOMMatrix-003.html
(live test)
(source)
In this example, a matrix is created and several 2D transformation methods are called:
var
matrix
new
DOMMatrix
();
matrix
scaleSelf
);
matrix
translateSelf
20
20
);
console
assert
matrix
toString
()
===
"matrix(2, 0, 0, 2, 40, 40)"
);
In the following example, a matrix is created and several 3D transformation methods are called:
var
matrix
new
DOMMatrix
();
matrix
scale3dSelf
);
console
assert
matrix
toString
()
===
"matrix3d(2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1)"
);
For 3D operations, the stringifier returns a string representing a 3D matrix.
This example will throw an exception because there are non-finite values in the matrix.
var
matrix
new
DOMMatrix
([
NaN
NaN
NaN
NaN
NaN
NaN
NaN
NaN
NaN
NaN
NaN
NaN
NaN
NaN
NaN
NaN
]);
var
string
matrix
" Batman!"
6.6.
Mutable transformation methods
The following methods modify the current matrix, so that each method returns the matrix where it
was invoked on. The primary benefit of this is allowing content creators to chain method calls.
The following code example:
var
matrix
new
DOMMatrix
();
matrix
translateSelf
20
20
);
matrix
scaleSelf
);
matrix
translateSelf
20
20
);
is equivalent to:
var
matrix
new
DOMMatrix
();
matrix
translateSelf
20
20
).
scaleSelf
).
translateSelf
20
20
);
Note:
Authors who use chained method calls are advised to use mutable transformation methods
to avoid unnecessary memory allocations due to creation of intermediate
DOMMatrix
objects in
user agents.
multiplySelf(
other
Let
otherObject
be the result of invoking
create a
DOMMatrix
from the dictionary
other
The
otherObject
matrix gets post-multiplied to the current matrix.
If
is 2D
of
otherObject
is
false
, set
is 2D
of the current matrix to
false
Return the current matrix.
preMultiplySelf(
other
Let
otherObject
be the result of invoking
create a
DOMMatrix
from the dictionary
other
The
otherObject
matrix gets pre-multiplied to the current matrix.
If
is 2D
of
otherObject
is
false
, set
is 2D
of the current matrix to
false
Return the current matrix.
translateSelf(
tx
ty
tz
Post-multiply
a translation transformation on the current matrix. The 3D
translation matrix is
described
in CSS
Transforms.
[CSS3-TRANSFORMS]
If
tz
is specified and not
or
-0
, set
is 2D
of the
current matrix to
false
Return the current matrix.
scaleSelf(
scaleX
scaleY
scaleZ
originX
originY
originZ
Perform a
translateSelf()
transformation on the current matrix with the
arguments
originX
originY
originZ
If
scaleY
is missing, set
scaleY
to the value of
scaleX
Post-multiply
a non-uniform scale transformation on the current matrix. The 3D
scale matrix is
described
in CSS Transforms with
sx
scaleX
sy
scaleY
and
sz
scaleZ
[CSS3-TRANSFORMS]
Negate
originX
originY
and
originZ
Perform a
translateSelf()
transformation on the current matrix with the
arguments
originX
originY
originZ
If
scaleZ
is not
, set
is 2D
of the current matrix to
false
Return the current matrix.
scale3dSelf(
scale
originX
originY
originZ
Apply a
translateSelf()
transformation to the current matrix with the
arguments
originX
originY
originZ
Post-multiply
a uniform 3D scale transformation (
m11
m22
m33
scale
) on the current matrix.
The 3D scale matrix is
described
in CSS Transforms
with
sx
sy
sz
scale
[CSS3-TRANSFORMS]
Apply a
translateSelf()
transformation to the current matrix with the
arguments -
originX
, -
originY
, -
originZ
If
scale
is not
, set
is 2D
of the current matrix to
false
Return the current matrix.
rotateSelf(
rotX
rotY
rotZ
If
rotY
and
rotZ
are both missing, set
rotZ
to the value
of
rotX
and set
rotX
and
rotY
to
If
rotY
is still missing, set
rotY
to
If
rotZ
is still missing, set
rotZ
to
If
rotX
or
rotY
are not
or
-0
, set
is 2D
of the current matrix to
false
Post-multiply
a rotation transformation on the current matrix around the vector 0,
0, 1 by the specified rotation
rotZ
in degrees. The 3D rotation matrix is
described
in CSS Transforms
with
alpha
rotZ
in degrees.
[CSS3-TRANSFORMS]
Post-multiply
a rotation transformation on the current matrix around the vector 0,
1, 0 by the specified rotation
rotY
in degrees. The 3D rotation matrix is
described
in CSS Transforms
with
alpha
rotY
in degrees.
[CSS3-TRANSFORMS]
Post-multiply
a rotation transformation on the current matrix around the vector 1,
0, 0 by the specified rotation
rotX
in degrees. The 3D rotation matrix is
described
in CSS Transforms
with
alpha
rotX
in degrees.
[CSS3-TRANSFORMS]
Return the current matrix.
rotateFromVectorSelf(
Post-multiply
a rotation transformation on the current matrix. The rotation angle
is determined by the angle between the vector (1,0)
and
in the clockwise direction. If
and
should both be
or
-0
, the angle is specified as
. The 2D rotation
matrix is
described
in CSS
Transforms where
alpha
is the angle between the vector (1,0)
and
in degrees.
[CSS3-TRANSFORMS]
Return the current matrix.
rotateAxisAngleSelf(
angle
Post-multiply
a rotation transformation on the current matrix around the specified
vector
by the specified rotation
angle
in
degrees. The 3D rotation matrix is
described
in CSS Transforms
with
alpha
angle
in degrees.
[CSS3-TRANSFORMS]
If
or
are not
or
-0
, set
is 2D
of
the current matrix to
false
Return the current matrix.
skewXSelf(
sx
Post-multiply
a skewX transformation on the current matrix by the specified angle
sx
in degrees. The 2D skewX matrix is
described
in CSS Transforms
with
alpha
sx
in degrees.
[CSS3-TRANSFORMS]
Return the current matrix.
skewYSelf(
sy
Post-multiply
a skewX transformation on the current matrix by the specified angle
sy
in degrees. The 2D skewY matrix is
described
in CSS Transforms
with
beta
sy
in degrees.
[CSS3-TRANSFORMS]
Return the current matrix.
invertSelf()
Invert the current matrix.
If the current matrix is not invertible set all attributes to
NaN
and set
is 2D
to
false
Return the current matrix.
Tests
DOMMatrix-invert-invertible.html
(live test)
(source)
DOMMatrix-invert-non-invertible.html
(live test)
(source)
DOMMatrix-invert-preserves-2d.html
(live test)
(source)
DOMMatrix-invertSelf.html
(live test)
(source)
setMatrixValue(
transformList
Parse
transformList
into an
abstract matrix
, and let
matrix
and
2dTransform
be the result. If the
result is failure, then throw a "
SyntaxError
DOMException
Set
is 2D
to the value of
2dTransform
Set
m11 element
through
m44 element
to the element
values of
matrix
in column-major order.
Return the current matrix.
Tests
DOMMatrix-css-string.worker.js
(live test)
(source)
7.
Structured serialization
DOMPointReadOnly
DOMPoint
DOMRectReadOnly
DOMRect
DOMQuad
DOMMatrixReadOnly
, and
DOMMatrix
objects are
serializable objects
[HTML]
The
serialization steps
for
DOMPointReadOnly
and
DOMPoint
, given
value
and
serialized
, are:
Set
serialized
.[[X]] to
value
’s
x coordinate
Set
serialized
.[[Y]] to
value
’s
y coordinate
Set
serialized
.[[Z]] to
value
’s
z coordinate
Set
serialized
.[[W]] to
value
’s
w perspective
Their
deserialization steps
, given
serialized
and
value
, are:
Set
value
’s
x coordinate
to
serialized
.[[X]].
Set
value
’s
y coordinate
to
serialized
.[[Y]].
Set
value
’s
z coordinate
to
serialized
.[[Z]].
Set
value
’s
w perspective
to
serialized
.[[W]].
The
serialization steps
for
DOMRectReadOnly
and
DOMRect
, given
value
and
serialized
, are:
Set
serialized
.[[X]] to
value
’s
x coordinate
Set
serialized
.[[Y]] to
value
’s
y coordinate
Set
serialized
.[[Width]] to
value
’s
width dimension
Set
serialized
.[[Height]] to
value
’s
height dimension
Their
deserialization steps
, given
serialized
and
value
, are:
Set
value
’s
x coordinate
to
serialized
.[[X]].
Set
value
’s
y coordinate
to
serialized
.[[Y]].
Set
value
’s
width dimension
to
serialized
.[[Width]].
Set
value
’s
height dimension
to
serialized
.[[Height]].
The
serialization steps
for
DOMQuad
, given
value
and
serialized
, are:
Set
serialized
.[[P1]] to the
sub-serialization
of
value
’s
point 1
Set
serialized
.[[P2]] to the
sub-serialization
of
value
’s
point 2
Set
serialized
.[[P3]] to the
sub-serialization
of
value
’s
point 3
Set
serialized
.[[P4]] to the
sub-serialization
of
value
’s
point 4
Their
deserialization steps
, given
serialized
and
value
, are:
Set
value
’s
point 1
to the
sub-deserialization
of
serialized
.[[P1]].
Set
value
’s
point 2
to the
sub-deserialization
of
serialized
.[[P2]].
Set
value
’s
point 3
to the
sub-deserialization
of
serialized
.[[P3]].
Set
value
’s
point 4
to the
sub-deserialization
of
serialized
.[[P4]].
The
serialization steps
for
DOMMatrixReadOnly
and
DOMMatrix
, given
value
and
serialized
, are:
If
value
’s
is 2D
is
true
Set
serialized
.[[M11]] to
value
’s
m11 element
Set
serialized
.[[M12]] to
value
’s
m12 element
Set
serialized
.[[M21]] to
value
’s
m21 element
Set
serialized
.[[M22]] to
value
’s
m22 element
Set
serialized
.[[M41]] to
value
’s
m41 element
Set
serialized
.[[M42]] to
value
’s
m42 element
Set
serialized
.[[Is2D]] to
true
Note:
It is possible for a 2D
DOMMatrix
or
DOMMatrixReadOnly
to have
-0
for
some of the other elements, e.g., the
m13 element
, which will not be
roundtripped by this algorithm.
Otherwise:
Set
serialized
.[[M11]] to
value
’s
m11 element
Set
serialized
.[[M12]] to
value
’s
m12 element
Set
serialized
.[[M13]] to
value
’s
m13 element
Set
serialized
.[[M14]] to
value
’s
m14 element
Set
serialized
.[[M21]] to
value
’s
m21 element
Set
serialized
.[[M22]] to
value
’s
m22 element
Set
serialized
.[[M23]] to
value
’s
m23 element
Set
serialized
.[[M24]] to
value
’s
m24 element
Set
serialized
.[[M31]] to
value
’s
m31 element
Set
serialized
.[[M32]] to
value
’s
m32 element
Set
serialized
.[[M33]] to
value
’s
m33 element
Set
serialized
.[[M34]] to
value
’s
m34 element
Set
serialized
.[[M41]] to
value
’s
m41 element
Set
serialized
.[[M42]] to
value
’s
m42 element
Set
serialized
.[[M43]] to
value
’s
m43 element
Set
serialized
.[[M44]] to
value
’s
m44 element
Set
serialized
.[[Is2D]] to
false
Their
deserialization steps
, given
serialized
and
value
, are:
If
serialized
.[[Is2D]] is
true
Set
value
’s
m11 element
to
serialized
.[[M11]].
Set
value
’s
m12 element
to
serialized
.[[M12]].
Set
value
’s
m13 element
to
Set
value
’s
m14 element
to
Set
value
’s
m21 element
to
serialized
.[[M21]].
Set
value
’s
m22 element
to
serialized
.[[M22]].
Set
value
’s
m23 element
to
Set
value
’s
m24 element
to
Set
value
’s
m31 element
to
Set
value
’s
m32 element
to
Set
value
’s
m33 element
to
Set
value
’s
m34 element
to
Set
value
’s
m41 element
to
serialized
.[[M41]].
Set
value
’s
m42 element
to
serialized
.[[M42]].
Set
value
’s
m43 element
to
Set
value
’s
m44 element
to
Set
value
’s
is 2D
to
true
Otherwise:
Set
value
’s
m11 element
to
serialized
.[[M11]].
Set
value
’s
m12 element
to
serialized
.[[M12]].
Set
value
’s
m13 element
to
serialized
.[[M13]].
Set
value
’s
m14 element
to
serialized
.[[M14]].
Set
value
’s
m21 element
to
serialized
.[[M21]].
Set
value
’s
m22 element
to
serialized
.[[M22]].
Set
value
’s
m23 element
to
serialized
.[[M23]].
Set
value
’s
m24 element
to
serialized
.[[M24]].
Set
value
’s
m31 element
to
serialized
.[[M31]].
Set
value
’s
m32 element
to
serialized
.[[M32]].
Set
value
’s
m33 element
to
serialized
.[[M33]].
Set
value
’s
m34 element
to
serialized
.[[M34]].
Set
value
’s
m41 element
to
serialized
.[[M41]].
Set
value
’s
m42 element
to
serialized
.[[M42]].
Set
value
’s
m43 element
to
serialized
.[[M43]].
Set
value
’s
m44 element
to
serialized
.[[M44]].
Set
value
’s
is 2D
to
false
Tests
structured-serialization.html
(live test)
(source)
8.
Security Considerations
The
DOMMatrix
and
DOMMatrixReadOnly
interfaces have entry-points to parsing a string with
CSS syntax. Therefore the
security considerations
of the CSS Syntax specification apply.
[CSS3-SYNTAX]
This could potentially be used to exploit bugs in the CSS parser in a user agent.
There are no other known security or privacy impacts of the interfaces defined in this
specification. However, other specifications that have APIs that use the interfaces defined in this
specification could potentially introduce security or privacy issues.
9.
Privacy Considerations
For example, the
getBoundingClientRect()
API defined in CSSOM View returns a
DOMRect
that could be used to measure the size of an inline element containing some text of a
particular font, which exposes information about whether the user has that font installed. That
information, if used to test many common fonts, can then be personally-identifiable information.
[CSSOM-VIEW]
10.
Historical
This section is non-normative.
The interfaces in this specification are intended to replace earlier similar interfaces found in
various specifications as well as proprietary interfaces found in some user agents. This section
attempts to enumerate these interfaces.
10.1.
CSSOM View
Earlier revisions of CSSOM View defined a
ClientRect
interface, which is replaced by
DOMRect
. Implementations conforming to this specification will not support
ClientRect
[CSSOM-VIEW]
10.2.
SVG
Earlier revisions of SVG defined
SVGPoint
SVGRect
SVGMatrix
, which are defined in
this specifications as aliases to
DOMPoint
DOMRect
DOMMatrix
, respectively.
[SVG11]
10.3.
Non-standard
Some user agents supported a
WebKitPoint
interface. Implementations conforming to
this specification will not support
WebKitPoint
Several user agents supported a
WebKitCSSMatrix
interface, which is also widely used on the
Web. It is defined in this specification as an alias to
DOMMatrix
Some user agents supported a
MSCSSMatrix
interface. Implementations conforming to
this specification will not support
MSCSSMatrix
Tests
historical.html
(live test)
(source)
Document conventions
The
NaN-safe minimum
of a non-empty list of
unrestricted double
values is NaN if any
member of the list is NaN, or the minimum of the list otherwise.
Analogously, the
NaN-safe maximum
of a non-empty list of
unrestricted double
values
is NaN if any member of the list is NaN, or the maximum of the list otherwise.
Changes since last publication
This section is non-normative.
The following changes were made since the
4 December 2018 Candidate Recommendation
Clarified that column vectors are pre-multiplied by matrices
#294
#359
Defined minimum and maximum as preferring NaN
#222
Used new WebIDL constructor definition
Added default dictionary value
Added [NewObject] to matrixTransform, to align with prose description
Removed redundant originZ check
#350
Added explicit [Exposed] to DOMRectList
Added Web Platform Tests coverage
The following changes were made since the
25 November 2014 Candidate Recommendation
Changed the interfaces to generally use specific static operations for construction instead
of using overloaded constructors, and made the interfaces more consistent. However,
DOMMatrix
still uses an overloaded constructor for compatibility with
WebKitCSSMatrix
Introduced the
DOMMatrixInit
dictionary.
Added JSON serializers for the interfaces.
Changed
DOMMatrixReadOnly
and
DOMMatrix
to be compatible with
WebKitCSSMatrix
Changed
rotate()
and
rotateSelf()
arguments from
(angle, originX, originY)
to
(rotX, rotY, rotZ)
Changed the
scale()
and
scaleSelf()
methods to be more
like the previous
scaleNonUniform()
scaleNonUniformSelf()
methods,
and dropped the
scaleNonUniformSelf()
method. Keep support for
scaleNonUniform()
for legacy reasons.
Made all arguments optional for
DOMMatrix
DOMMatrixReadOnly
methods, except for
setMatrixValue()
Added no-argument constructor.
Defined
WebKitCSSMatrix
to be a legacy window alias for
DOMMatrix
In workers,
DOMMatrix
and
DOMMatrixReadOnly
do not support parsing or stringifying with CSS syntax.
Defined structured serialization of the interfaces.
The live
bounds
attribute on
DOMQuad
was replaced with a non-live
getBounds()
method. The "associated bounding rectangle" concept was also removed.
Changed the string parser for
DOMMatrix
and
DOMMatrixReadOnly
to use CSS rules
instead of SVG rules.
The stringifier for
DOMMatrix
and
DOMMatrixReadOnly
now throws if there are
non-finite values, and otherwise uses the
ToString
algorithm.
[ECMA-262]
Made comparisons treat
and
-0
as equal throughout.
Added
§ 9 Privacy Considerations
and
§ 10 Historical
sections.
The following changes were made since the
18 September 2014 Working Draft
Exposed
DOMPointReadOnly
DOMPoint
DOMRectReadOnly
DOMRect
DOMQuad
DOMMatrixReadOnly
and
DOMMatrix
to
Window
and
Worker
. Defined cloning of
the interface.
The following changes were made since the
26 June 2014 Last Call Public Working
Draft
DOMPointReadOnly
got a constructor taking 4 arguments.
DOMRectReadOnly
got a constructor taking 4 arguments.
DOMMatrixReadOnly
got a constructor taking a sequence of numbers as argument.
DOMRectList
turned to an ArrayClass. The interfaces can just be used for legacy
interfaces.
Put
DOMRectList
on at-Risk awaiting browser feedback.
All interfaces are described in the sense of internal elements to describe the
read-only/writable and inheriting behavior.
Replace
IndexSizeError
exception with
TypeError
The following changes were made since the
22 May 2014 First Public Working Draft
Renamed mutable transformation methods *By to *Self. (E.g.
translateBy()
got
renamed to
translateSelf()
.)
Renamed
invert()
to
invertSelf()
Added
setMatrixValue()
which takes a transformation list as
DOMString
is2D
and
isIdentity
are read-only attributes now.
DOMMatrixReadOnly
gets flagged to track 3D transformation and attribute settings for
is2D
invertSelf()
and
inverse()
do not throw exceptions anymore.
Acknowledgments
The editors would like to thank Robert O’Callahan for contributing to this specification.
Many thanks to Dean Jackson for his initial proposal of DOMMatrix.
Thanks to
Adenilson Cavalcanti,
Benoit Jacob,
Boris Zbarsky,
Brian Birtles,
Cameron McCormack,
Domenic Denicola,
Kari Pihkala,
Max Vujovic,
Mike Taylor,
Peter Hall,
Philip Jägenstedt,
Simon Fraser,
and
Timothy Loh
for their careful reviews, comments, and corrections.
Conformance
Document conventions
Conformance requirements are expressed with a combination of
descriptive assertions and RFC 2119 terminology. The key words “MUST”,
“MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”,
“RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this
document are to be interpreted as described in RFC 2119.
However, for readability, these words do not appear in all uppercase
letters in this specification.
All of the text of this specification is normative except sections
explicitly marked as non-normative, examples, and notes.
[RFC2119]
Examples in this specification are introduced with the words “for example”
or are set apart from the normative text with
class="example"
like this:
This is an example of an informative example.
Informative notes begin with the word “Note” and are set apart from the
normative text with
class="note"
, like this:
Note, this is an informative note.
Advisements are normative sections styled to evoke special attention and are
set apart from other normative text with

, like
this:
UAs MUST provide an accessible alternative.
Tests
Tests relating to the content of this specification
may be documented in “Tests” blocks like this one.
Any such block is non-normative.
Conformance classes
Conformance to this specification
is defined for three conformance classes:
style sheet
CSS
style sheet
renderer
UA
that interprets the semantics of a style sheet and renders
documents that use them.
authoring tool
UA
that writes a style sheet.
A style sheet is conformant to this specification
if all of its statements that use syntax defined in this module are valid
according to the generic CSS grammar and the individual grammars of each
feature defined in this module.
A renderer is conformant to this specification
if, in addition to interpreting the style sheet as defined by the
appropriate specifications, it supports all the features defined
by this specification by parsing them correctly
and rendering the document accordingly. However, the inability of a
UA to correctly render a document due to limitations of the device
does not make the UA non-conformant. (For example, a UA is not
required to render color on a monochrome monitor.)
An authoring tool is conformant to this specification
if it writes style sheets that are syntactically correct according to the
generic CSS grammar and the individual grammars of each feature in
this module, and meet all other conformance requirements of style sheets
as described in this module.
Partial implementations
So that authors can exploit the forward-compatible parsing rules to
assign fallback values, CSS renderers
must
treat as invalid (and
ignore
as appropriate
) any at-rules, properties, property values, keywords,
and other syntactic constructs for which they have no usable level of
support. In particular, user agents
must not
selectively
ignore unsupported component values and honor supported values in a single
multi-value property declaration: if any value is considered invalid
(as unsupported values must be), CSS requires that the entire declaration
be ignored.
Implementations of Unstable and Proprietary Features
To avoid clashes with future stable CSS features,
the CSSWG recommends
following best practices
for the implementation of
unstable
features and
proprietary extensions
to CSS.
Non-experimental implementations
Once a specification reaches the Candidate Recommendation stage,
non-experimental implementations are possible, and implementors should
release an unprefixed implementation of any CR-level feature they
can demonstrate to be correctly implemented according to spec.
To establish and maintain the interoperability of CSS across
implementations, the CSS Working Group requests that non-experimental
CSS renderers submit an implementation report (and, if necessary, the
testcases used for that implementation report) to the W3C before
releasing an unprefixed implementation of any CSS features. Testcases
submitted to W3C are subject to review and correction by the CSS
Working Group.
Further information on submitting testcases and implementation reports
can be found from on the CSS Working Group’s website at
Questions should be directed to the
public-css-testsuite@w3.org
mailing list.
CR exit criteria
For this specification to be advanced to Proposed Recommendation,
there must be at least two independent, interoperable implementations
of each feature. Each feature may be implemented by a different set of
products, there is no requirement that all features be implemented by
a single product. For the purposes of this criterion, we define the
following terms:
independent
each implementation must be developed by a
different party and cannot share, reuse, or derive from code
used by another qualifying implementation. Sections of code that
have no bearing on the implementation of this specification are
exempt from this requirement.
interoperable
passing the respective test case(s) in the
official CSS test suite, or, if the implementation is not a Web
browser, an equivalent test. Every relevant test in the test
suite should have an equivalent test created if such a user
agent (UA) is to be used to claim interoperability. In addition
if such a UA is to be used to claim interoperability, then there
must one or more additional UAs which can also pass those
equivalent tests in the same way for the purpose of
interoperability. The equivalent tests must be made publicly
available for the purposes of peer review.
implementation
a user agent which:
implements the specification.
is available to the general public. The implementation may
be a shipping product or other publicly available version
(i.e., beta version, preview release, or "nightly build").
Non-shipping product releases must have implemented the
feature(s) for a period of at least one month in order to
demonstrate stability.
is not experimental (i.e., a version specifically designed
to pass the test suite and is not intended for normal usage
going forward).
The specification will remain Candidate Recommendation for at least
six months.
Index
Terms defined by this specification
4x4 abstract matrix
, in § 6
attribute for DOMMatrixReadOnly, DOMMatrix
, in § 6.4
dict-member for DOMMatrix2DInit
, in § 6
attribute for DOMMatrixReadOnly, DOMMatrix
, in § 6.4
dict-member for DOMMatrix2DInit
, in § 6
bottom
attribute for DOMRectReadOnly
, in § 3
attribute for DOMRectReadOnly DOMRect
, in § 3
attribute for DOMMatrixReadOnly, DOMMatrix
, in § 6.4
dict-member for DOMMatrix2DInit
, in § 6
constructor()
constructor for DOMMatrix
, in § 6.3
constructor for DOMMatrixReadOnly
, in § 6.3
constructor for DOMPoint
, in § 2
constructor for DOMPointReadOnly
, in § 2
constructor for DOMQuad
, in § 5
constructor for DOMRect
, in § 3
constructor for DOMRectReadOnly
, in § 3
constructor(init)
constructor for DOMMatrix
, in § 6.3
constructor for DOMMatrixReadOnly
, in § 6.3
constructor(p1)
, in § 5
constructor(p1, p2)
, in § 5
constructor(p1, p2, p3)
, in § 5
constructor(p1, p2, p3, p4)
, in § 5
constructor(x)
constructor for DOMPoint
, in § 2
constructor for DOMPointReadOnly
, in § 2
constructor for DOMRect
, in § 3
constructor for DOMRectReadOnly
, in § 3
constructor(x, y)
constructor for DOMPoint
, in § 2
constructor for DOMPointReadOnly
, in § 2
constructor for DOMRect
, in § 3
constructor for DOMRectReadOnly
, in § 3
constructor(x, y, width)
constructor for DOMRect
, in § 3
constructor for DOMRectReadOnly
, in § 3
constructor(x, y, width, height)
constructor for DOMRect
, in § 3
constructor for DOMRectReadOnly
, in § 3
constructor(x, y, z)
constructor for DOMPoint
, in § 2
constructor for DOMPointReadOnly
, in § 2
constructor(x, y, z, w)
constructor for DOMPoint
, in § 2
constructor for DOMPointReadOnly
, in § 2
create a 2d matrix
, in § 6.3
create a 3d matrix
, in § 6.3
create a DOMMatrix from the 2D dictionary
, in § 6.3
create a DOMMatrix from the dictionary
, in § 6.3
create a DOMMatrixReadOnly from the 2D dictionary
, in § 6.3
create a DOMMatrixReadOnly from the dictionary
, in § 6.3
create a DOMPoint from the dictionary
, in § 2
create a DOMPointReadOnly from the dictionary
, in § 2
create a DOMQuad from the DOMQuadInit dictionary
, in § 5
create a DOMQuad from the DOMRectInit dictionary
, in § 5
create a DOMRect from the dictionary
, in § 3
create a DOMRectReadOnly from the dictionary
, in § 3
attribute for DOMMatrixReadOnly, DOMMatrix
, in § 6.4
dict-member for DOMMatrix2DInit
, in § 6
DOMMatrix
, in § 6
DOMMatrix()
, in § 6.3
DOMMatrix2DInit
, in § 6
DOMMatrix(init)
, in § 6.3
DOMMatrixInit
, in § 6
DOMMatrixReadOnly
, in § 6
DOMMatrixReadOnly()
, in § 6.3
DOMMatrixReadOnly(init)
, in § 6.3
DOMPoint
, in § 2
DOMPoint()
, in § 2
DOMPointInit
, in § 2
DOMPointReadOnly
, in § 2
DOMPointReadOnly()
, in § 2
DOMPointReadOnly(x)
, in § 2
DOMPointReadOnly(x, y)
, in § 2
DOMPointReadOnly(x, y, z)
, in § 2
DOMPointReadOnly(x, y, z, w)
, in § 2
DOMPoint(x)
, in § 2
DOMPoint(x, y)
, in § 2
DOMPoint(x, y, z)
, in § 2
DOMPoint(x, y, z, w)
, in § 2
DOMQuad
, in § 5
DOMQuad()
, in § 5
DOMQuadInit
, in § 5
DOMQuad(p1)
, in § 5
DOMQuad(p1, p2)
, in § 5
DOMQuad(p1, p2, p3)
, in § 5
DOMQuad(p1, p2, p3, p4)
, in § 5
DOMRect
, in § 3
DOMRect()
, in § 3
DOMRectInit
, in § 3
DOMRectList
, in § 4
DOMRectReadOnly
, in § 3
DOMRectReadOnly()
, in § 3
DOMRectReadOnly(x)
, in § 3
DOMRectReadOnly(x, y)
, in § 3
DOMRectReadOnly(x, y, width)
, in § 3
DOMRectReadOnly(x, y, width, height)
, in § 3
DOMRect(x)
, in § 3
DOMRect(x, y)
, in § 3
DOMRect(x, y, width)
, in § 3
DOMRect(x, y, width, height)
, in § 3
attribute for DOMMatrixReadOnly, DOMMatrix
, in § 6.4
dict-member for DOMMatrix2DInit
, in § 6
attribute for DOMMatrixReadOnly, DOMMatrix
, in § 6.4
dict-member for DOMMatrix2DInit
, in § 6
flipX()
, in § 6.5
flipY()
, in § 6.5
fromFloat32Array(array32)
method for DOMMatrix
, in § 6.3
method for DOMMatrixReadOnly
, in § 6.3
fromFloat64Array(array64)
method for DOMMatrix
, in § 6.3
method for DOMMatrixReadOnly
, in § 6.3
fromMatrix()
method for DOMMatrix
, in § 6.3
method for DOMMatrixReadOnly
, in § 6.3
fromMatrix(other)
method for DOMMatrix
, in § 6.3
method for DOMMatrixReadOnly
, in § 6.3
fromPoint()
method for DOMPoint
, in § 2
method for DOMPointReadOnly
, in § 2
fromPoint(other)
method for DOMPoint
, in § 2
method for DOMPointReadOnly
, in § 2
fromQuad()
, in § 5
fromQuad(other)
, in § 5
fromRect()
method for DOMQuad
, in § 5
method for DOMRect
, in § 3
method for DOMRectReadOnly
, in § 3
fromRect(other)
method for DOMQuad
, in § 5
method for DOMRect
, in § 3
method for DOMRectReadOnly
, in § 3
getBounds()
, in § 5
height
attribute for DOMRect
, in § 3
attribute for DOMRectReadOnly
, in § 3
attribute for DOMRectReadOnly DOMRect
, in § 3
dict-member for DOMRectInit
, in § 3
height dimension
, in § 3
inverse()
, in § 6.5
invertSelf()
, in § 6.6
is 2D
, in § 6.4
is2D
attribute for DOMMatrixReadOnly
, in § 6.4
dict-member for DOMMatrixInit
, in § 6
isIdentity
, in § 6.4
item(index)
, in § 4
left
attribute for DOMRectReadOnly
, in § 3
attribute for DOMRectReadOnly DOMRect
, in § 3
length
, in § 4
m11
attribute for DOMMatrixReadOnly, DOMMatrix
, in § 6.4
dict-member for DOMMatrix2DInit
, in § 6
m11 element
, in § 6
m12
attribute for DOMMatrixReadOnly, DOMMatrix
, in § 6.4
dict-member for DOMMatrix2DInit
, in § 6
m12 element
, in § 6
m13
attribute for DOMMatrixReadOnly, DOMMatrix
, in § 6.4
dict-member for DOMMatrixInit
, in § 6
m13 element
, in § 6
m14
attribute for DOMMatrixReadOnly, DOMMatrix
, in § 6.4
dict-member for DOMMatrixInit
, in § 6
m14 element
, in § 6
m21
attribute for DOMMatrixReadOnly, DOMMatrix
, in § 6.4
dict-member for DOMMatrix2DInit
, in § 6
m21 element
, in § 6
m22
attribute for DOMMatrixReadOnly, DOMMatrix
, in § 6.4
dict-member for DOMMatrix2DInit
, in § 6
m22 element
, in § 6
m23
attribute for DOMMatrixReadOnly, DOMMatrix
, in § 6.4
dict-member for DOMMatrixInit
, in § 6
m23 element
, in § 6
m24
attribute for DOMMatrixReadOnly, DOMMatrix
, in § 6.4
dict-member for DOMMatrixInit
, in § 6
m24 element
, in § 6
m31
attribute for DOMMatrixReadOnly, DOMMatrix
, in § 6.4
dict-member for DOMMatrixInit
, in § 6
m31 element
, in § 6
m32
attribute for DOMMatrixReadOnly, DOMMatrix
, in § 6.4
dict-member for DOMMatrixInit
, in § 6
m32 element
, in § 6
m33
attribute for DOMMatrixReadOnly, DOMMatrix
, in § 6.4
dict-member for DOMMatrixInit
, in § 6
m33 element
, in § 6
m34
attribute for DOMMatrixReadOnly, DOMMatrix
, in § 6.4
dict-member for DOMMatrixInit
, in § 6
m34 element
, in § 6
m41
attribute for DOMMatrixReadOnly, DOMMatrix
, in § 6.4
dict-member for DOMMatrix2DInit
, in § 6
m41 element
, in § 6
m42
attribute for DOMMatrixReadOnly, DOMMatrix
, in § 6.4
dict-member for DOMMatrix2DInit
, in § 6
m42 element
, in § 6
m43
attribute for DOMMatrixReadOnly, DOMMatrix
, in § 6.4
dict-member for DOMMatrixInit
, in § 6
m43 element
, in § 6
m44
attribute for DOMMatrixReadOnly, DOMMatrix
, in § 6.4
dict-member for DOMMatrixInit
, in § 6
m44 element
, in § 6
matrix
, in § 6
matrixTransform()
, in § 2
matrixTransform(matrix)
, in § 2
multiply
, in § 6
multiply()
, in § 6.5
multiply(other)
, in § 6.5
multiplySelf()
, in § 6.6
multiplySelf(other)
, in § 6.6
NaN-safe maximum
, in § Unnumbered section
NaN-safe minimum
, in § Unnumbered section
origin
, in § 3
p1
attribute for DOMQuad
, in § 5
dict-member for DOMQuadInit
, in § 5
p2
attribute for DOMQuad
, in § 5
dict-member for DOMQuadInit
, in § 5
p3
attribute for DOMQuad
, in § 5
dict-member for DOMQuadInit
, in § 5
p4
attribute for DOMQuad
, in § 5
dict-member for DOMQuadInit
, in § 5
parse a string into an abstract matrix
, in § 6.2
point
, in § 2
point 1
, in § 5
point 2
, in § 5
point 3
, in § 5
point 4
, in § 5
post-multiply
, in § 6
pre-multiply
, in § 6
preMultiplySelf()
, in § 6.6
preMultiplySelf(other)
, in § 6.6
quadrilateral
, in § 5
rectangle
, in § 3
right
attribute for DOMRectReadOnly
, in § 3
attribute for DOMRectReadOnly DOMRect
, in § 3
rotate()
, in § 6.5
rotateAxisAngle()
, in § 6.5
rotateAxisAngleSelf()
, in § 6.6
rotateAxisAngleSelf(x)
, in § 6.6
rotateAxisAngleSelf(x, y)
, in § 6.6
rotateAxisAngleSelf(x, y, z)
, in § 6.6
rotateAxisAngleSelf(x, y, z, angle)
, in § 6.6
rotateAxisAngle(x)
, in § 6.5
rotateAxisAngle(x, y)
, in § 6.5
rotateAxisAngle(x, y, z)
, in § 6.5
rotateAxisAngle(x, y, z, angle)
, in § 6.5
rotateFromVector()
, in § 6.5
rotateFromVectorSelf()
, in § 6.6
rotateFromVectorSelf(x)
, in § 6.6
rotateFromVectorSelf(x, y)
, in § 6.6
rotateFromVector(x)
, in § 6.5
rotateFromVector(x, y)
, in § 6.5
rotate(rotX)
, in § 6.5
rotate(rotX, rotY)
, in § 6.5
rotate(rotX, rotY, rotZ)
, in § 6.5
rotateSelf()
, in § 6.6
rotateSelf(rotX)
, in § 6.6
rotateSelf(rotX, rotY)
, in § 6.6
rotateSelf(rotX, rotY, rotZ)
, in § 6.6
scale()
, in § 6.5
scale3d()
, in § 6.5
scale3d(scale)
, in § 6.5
scale3d(scale, originX)
, in § 6.5
scale3d(scale, originX, originY)
, in § 6.5
scale3d(scale, originX, originY, originZ)
, in § 6.5
scale3dSelf()
, in § 6.6
scale3dSelf(scale)
, in § 6.6
scale3dSelf(scale, originX)
, in § 6.6
scale3dSelf(scale, originX, originY)
, in § 6.6
scale3dSelf(scale, originX, originY, originZ)
, in § 6.6
scaleNonUniform()
, in § 6.5
scaleNonUniform(scaleX)
, in § 6.5
scaleNonUniform(scaleX, scaleY)
, in § 6.5
scale(scaleX)
, in § 6.5
scale(scaleX, scaleY)
, in § 6.5
scale(scaleX, scaleY, scaleZ)
, in § 6.5
scale(scaleX, scaleY, scaleZ, originX)
, in § 6.5
scale(scaleX, scaleY, scaleZ, originX, originY)
, in § 6.5
scale(scaleX, scaleY, scaleZ, originX, originY, originZ)
, in § 6.5
scaleSelf()
, in § 6.6
scaleSelf(scaleX)
, in § 6.6
scaleSelf(scaleX, scaleY)
, in § 6.6
scaleSelf(scaleX, scaleY, scaleZ)
, in § 6.6
scaleSelf(scaleX, scaleY, scaleZ, originX)
, in § 6.6
scaleSelf(scaleX, scaleY, scaleZ, originX, originY)
, in § 6.6
scaleSelf(scaleX, scaleY, scaleZ, originX, originY, originZ)
, in § 6.6
setMatrixValue(transformList)
, in § 6.6
skewX()
, in § 6.5
skewXSelf()
, in § 6.6
skewXSelf(sx)
, in § 6.6
skewX(sx)
, in § 6.5
skewY()
, in § 6.5
skewYSelf()
, in § 6.6
skewYSelf(sy)
, in § 6.6
skewY(sy)
, in § 6.5
stringificationbehavior
, in § 6.5
SVGMatrix
, in § 6
SVGPoint
, in § 2
SVGRect
, in § 3
toFloat32Array()
, in § 6.5
toFloat64Array()
, in § 6.5
toJSON()
method for DOMMatrixReadOnly
, in § 6
method for DOMPointReadOnly
, in § 2
method for DOMQuad
, in § 5
method for DOMRectReadOnly
, in § 3
top
attribute for DOMRectReadOnly
, in § 3
attribute for DOMRectReadOnly DOMRect
, in § 3
transform a point with a matrix
, in § 2.1
transformPoint()
, in § 6.5
transformPoint(point)
, in § 6.5
translate()
, in § 6.5
translateSelf()
, in § 6.6
translateSelf(tx)
, in § 6.6
translateSelf(tx, ty)
, in § 6.6
translateSelf(tx, ty, tz)
, in § 6.6
translate(tx)
, in § 6.5
translate(tx, ty)
, in § 6.5
translate(tx, ty, tz)
, in § 6.5
validate and fixup
, in § 6.1
validate and fixup (2D)
, in § 6.1
attribute for DOMPointReadOnly, DOMPoint
, in § 2
dict-member for DOMPointInit
, in § 2
WebKitCSSMatrix
, in § 6
width
attribute for DOMRect
, in § 3
attribute for DOMRectReadOnly
, in § 3
attribute for DOMRectReadOnly DOMRect
, in § 3
dict-member for DOMRectInit
, in § 3
width dimension
, in § 3
w perspective
, in § 2
attribute for DOMPointReadOnly, DOMPoint
, in § 2
attribute for DOMRect
, in § 3
attribute for DOMRectReadOnly
, in § 3
attribute for DOMRectReadOnly DOMRect
, in § 3
dict-member for DOMPointInit
, in § 2
dict-member for DOMRectInit
, in § 3
x coordinate
dfn for point
, in § 2
dfn for rectangle
, in § 3
attribute for DOMPointReadOnly, DOMPoint
, in § 2
attribute for DOMRect
, in § 3
attribute for DOMRectReadOnly
, in § 3
attribute for DOMRectReadOnly DOMRect
, in § 3
dict-member for DOMPointInit
, in § 2
dict-member for DOMRectInit
, in § 3
y coordinate
dfn for point
, in § 2
dfn for rectangle
, in § 3
attribute for DOMPointReadOnly, DOMPoint
, in § 2
dict-member for DOMPointInit
, in § 2
z coordinate
, in § 2
Terms defined by reference
[CSS-TRANSFORMS-2]
defines the following terms:

matrix3d()
[CSS-VALUES-4]
defines the following terms:

absolute length
infinity
NaN
[CSS3-SYNTAX]
defines the following terms:
parse
[CSS3-TRANSFORMS]
defines the following terms:

matrix()
transform
[CSSOM-VIEW]
defines the following terms:
getBoundingClientRect()
[ECMA-262]
defines the following terms:
SameValueZero
ToString
[HTML]
defines the following terms:
Serializable
Window
Worker
current global object
deserialization steps
serializable object
serialization steps
sub-deserialization
sub-serialization
[WEBIDL]
defines the following terms:
DOMException
DOMString
Default
Exposed
Float32Array
Float64Array
IndexSizeError
InvalidStateError
LegacyWindowAlias
NewObject
SameObject
SyntaxError
TypeError
boolean
object
sequence
unrestricted double
unsigned long
References
Normative References
[CSS-TRANSFORMS-2]
Tab Atkins Jr.; et al.
CSS Transforms Module Level 2
. 9 November 2021. WD. URL:
[CSS-VALUES-4]
Tab Atkins Jr.; Elika Etemad.
CSS Values and Units Module Level 4
. 12 March 2024. WD. URL:
[CSS3-SYNTAX]
Tab Atkins Jr.; Simon Sapin.
CSS Syntax Module Level 3
. 24 December 2021. CRD. URL:
[CSS3-TRANSFORMS]
Simon Fraser; et al.
CSS Transforms Module Level 1
. 14 February 2019. CR. URL:
[ECMA-262]
ECMAScript Language Specification
. URL:
[HTML]
Anne van Kesteren; et al.
HTML Standard
. Living Standard. URL:
[RFC2119]
S. Bradner.
Key words for use in RFCs to Indicate Requirement Levels
. March 1997. Best Current Practice. URL:
[WEBIDL]
Edgar Chen; Timothy Gu.
Web IDL Standard
. Living Standard. URL:
Non-Normative References
[CSSOM-VIEW]
Simon Fraser; Emilio Cobos Álvarez.
CSSOM View Module
. 16 September 2025. WD. URL:
[SVG11]
Erik Dahlström; et al.
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
. 16 August 2011. REC. URL:
IDL Index
Exposed
=(
Window
Worker
),
Serializable
interface
DOMPointReadOnly
constructor
optional
unrestricted
double
= 0,
optional
unrestricted
double
= 0,
optional
unrestricted
double
= 0,
optional
unrestricted
double
= 1);

NewObject
static
DOMPointReadOnly
fromPoint
optional
DOMPointInit
other
= {});
readonly
attribute
unrestricted
double
readonly
attribute
unrestricted
double
readonly
attribute
unrestricted
double
readonly
attribute
unrestricted
double

NewObject
DOMPoint
matrixTransform
optional
DOMMatrixInit
matrix
= {});

Default
object
toJSON
();
};

Exposed
=(
Window
Worker
),
Serializable
LegacyWindowAlias
SVGPoint
interface
DOMPoint
DOMPointReadOnly
constructor
optional
unrestricted
double
= 0,
optional
unrestricted
double
= 0,
optional
unrestricted
double
= 0,
optional
unrestricted
double
= 1);

NewObject
static
DOMPoint
fromPoint
optional
DOMPointInit
other
= {});
inherit
attribute
unrestricted
double
inherit
attribute
unrestricted
double
inherit
attribute
unrestricted
double
inherit
attribute
unrestricted
double
};
dictionary
DOMPointInit
unrestricted
double
= 0;
unrestricted
double
= 0;
unrestricted
double
= 0;
unrestricted
double
= 1;
};

Exposed
=(
Window
Worker
),
Serializable
interface
DOMRectReadOnly
constructor
optional
unrestricted
double
= 0,
optional
unrestricted
double
= 0,
optional
unrestricted
double
width
= 0,
optional
unrestricted
double
height
= 0);

NewObject
static
DOMRectReadOnly
fromRect
optional
DOMRectInit
other
= {});
readonly
attribute
unrestricted
double
readonly
attribute
unrestricted
double
readonly
attribute
unrestricted
double
width
readonly
attribute
unrestricted
double
height
readonly
attribute
unrestricted
double
top
readonly
attribute
unrestricted
double
right
readonly
attribute
unrestricted
double
bottom
readonly
attribute
unrestricted
double
left

Default
object
toJSON
();
};

Exposed
=(
Window
Worker
),
Serializable
LegacyWindowAlias
SVGRect
interface
DOMRect
DOMRectReadOnly
constructor
optional
unrestricted
double
= 0,
optional
unrestricted
double
= 0,
optional
unrestricted
double
width
= 0,
optional
unrestricted
double
height
= 0);

NewObject
static
DOMRect
fromRect
optional
DOMRectInit
other
= {});
inherit
attribute
unrestricted
double
inherit
attribute
unrestricted
double
inherit
attribute
unrestricted
double
width
inherit
attribute
unrestricted
double
height
};
dictionary
DOMRectInit
unrestricted
double
= 0;
unrestricted
double
= 0;
unrestricted
double
width
= 0;
unrestricted
double
height
= 0;
};

Exposed
Window
interface
DOMRectList
readonly
attribute
unsigned
long
length
getter
DOMRect
item
unsigned
long
index
);
};

Exposed
=(
Window
Worker
),
Serializable
interface
DOMQuad
constructor
optional
DOMPointInit
p1
= {},
optional
DOMPointInit
p2
= {},
optional
DOMPointInit
p3
= {},
optional
DOMPointInit
p4
= {});

NewObject
static
DOMQuad
fromRect
optional
DOMRectInit
other
= {});
NewObject
static
DOMQuad
fromQuad
optional
DOMQuadInit
other
= {});

SameObject
readonly
attribute
DOMPoint
p1
SameObject
readonly
attribute
DOMPoint
p2
SameObject
readonly
attribute
DOMPoint
p3
SameObject
readonly
attribute
DOMPoint
p4
NewObject
DOMRect
getBounds
();

Default
object
toJSON
();
};
dictionary
DOMQuadInit
DOMPointInit
p1
DOMPointInit
p2
DOMPointInit
p3
DOMPointInit
p4
};

Exposed
=(
Window
Worker
),
Serializable
interface
DOMMatrixReadOnly
constructor
optional
DOMString
or
sequence
unrestricted
double
>)
init
);

NewObject
static
DOMMatrixReadOnly
fromMatrix
optional
DOMMatrixInit
other
= {});
NewObject
static
DOMMatrixReadOnly
fromFloat32Array
Float32Array
array32
);
NewObject
static
DOMMatrixReadOnly
fromFloat64Array
Float64Array
array64
);

// These attributes are simple aliases for certain elements of the 4x4 matrix
readonly
attribute
unrestricted
double
readonly
attribute
unrestricted
double
readonly
attribute
unrestricted
double
readonly
attribute
unrestricted
double
readonly
attribute
unrestricted
double
readonly
attribute
unrestricted
double
readonly
attribute
unrestricted
double
m11
readonly
attribute
unrestricted
double
m12
readonly
attribute
unrestricted
double
m13
readonly
attribute
unrestricted
double
m14
readonly
attribute
unrestricted
double
m21
readonly
attribute
unrestricted
double
m22
readonly
attribute
unrestricted
double
m23
readonly
attribute
unrestricted
double
m24
readonly
attribute
unrestricted
double
m31
readonly
attribute
unrestricted
double
m32
readonly
attribute
unrestricted
double
m33
readonly
attribute
unrestricted
double
m34
readonly
attribute
unrestricted
double
m41
readonly
attribute
unrestricted
double
m42
readonly
attribute
unrestricted
double
m43
readonly
attribute
unrestricted
double
m44
readonly
attribute
boolean
is2D
readonly
attribute
boolean
isIdentity

// Immutable transform methods
NewObject
DOMMatrix
translate
optional
unrestricted
double
tx
= 0,
optional
unrestricted
double
ty
= 0,
optional
unrestricted
double
tz
= 0);
NewObject
DOMMatrix
scale
optional
unrestricted
double
scaleX
= 1,
optional
unrestricted
double
scaleY
optional
unrestricted
double
scaleZ
= 1,
optional
unrestricted
double
originX
= 0,
optional
unrestricted
double
originY
= 0,
optional
unrestricted
double
originZ
= 0);
NewObject
DOMMatrix
scaleNonUniform
optional
unrestricted
double
scaleX
= 1,
optional
unrestricted
double
scaleY
= 1);
NewObject
DOMMatrix
scale3d
optional
unrestricted
double
scale
= 1,
optional
unrestricted
double
originX
= 0,
optional
unrestricted
double
originY
= 0,
optional
unrestricted
double
originZ
= 0);
NewObject
DOMMatrix
rotate
optional
unrestricted
double
rotX
= 0,
optional
unrestricted
double
rotY
optional
unrestricted
double
rotZ
);
NewObject
DOMMatrix
rotateFromVector
optional
unrestricted
double
= 0,
optional
unrestricted
double
= 0);
NewObject
DOMMatrix
rotateAxisAngle
optional
unrestricted
double
= 0,
optional
unrestricted
double
= 0,
optional
unrestricted
double
= 0,
optional
unrestricted
double
angle
= 0);
NewObject
DOMMatrix
skewX
optional
unrestricted
double
sx
= 0);
NewObject
DOMMatrix
skewY
optional
unrestricted
double
sy
= 0);
NewObject
DOMMatrix
multiply
optional
DOMMatrixInit
other
= {});
NewObject
DOMMatrix
flipX
();
NewObject
DOMMatrix
flipY
();
NewObject
DOMMatrix
inverse
();

NewObject
DOMPoint
transformPoint
optional
DOMPointInit
point
= {});
NewObject
Float32Array
toFloat32Array
();
NewObject
Float64Array
toFloat64Array
();

Exposed
Window
stringifier
Default
object
toJSON
();
};

Exposed
=(
Window
Worker
),
Serializable
LegacyWindowAlias
=(
SVGMatrix
WebKitCSSMatrix
)]
interface
DOMMatrix
DOMMatrixReadOnly
constructor
optional
DOMString
or
sequence
unrestricted
double
>)
init
);

NewObject
static
DOMMatrix
fromMatrix
optional
DOMMatrixInit
other
= {});
NewObject
static
DOMMatrix
fromFloat32Array
Float32Array
array32
);
NewObject
static
DOMMatrix
fromFloat64Array
Float64Array
array64
);

// These attributes are simple aliases for certain elements of the 4x4 matrix
inherit
attribute
unrestricted
double
inherit
attribute
unrestricted
double
inherit
attribute
unrestricted
double
inherit
attribute
unrestricted
double
inherit
attribute
unrestricted
double
inherit
attribute
unrestricted
double
inherit
attribute
unrestricted
double
m11
inherit
attribute
unrestricted
double
m12
inherit
attribute
unrestricted
double
m13
inherit
attribute
unrestricted
double
m14
inherit
attribute
unrestricted
double
m21
inherit
attribute
unrestricted
double
m22
inherit
attribute
unrestricted
double
m23
inherit
attribute
unrestricted
double
m24
inherit
attribute
unrestricted
double
m31
inherit
attribute
unrestricted
double
m32
inherit
attribute
unrestricted
double
m33
inherit
attribute
unrestricted
double
m34
inherit
attribute
unrestricted
double
m41
inherit
attribute
unrestricted
double
m42
inherit
attribute
unrestricted
double
m43
inherit
attribute
unrestricted
double
m44

// Mutable transform methods
DOMMatrix
multiplySelf
optional
DOMMatrixInit
other
= {});
DOMMatrix
preMultiplySelf
optional
DOMMatrixInit
other
= {});
DOMMatrix
translateSelf
optional
unrestricted
double
tx
= 0,
optional
unrestricted
double
ty
= 0,
optional
unrestricted
double
tz
= 0);
DOMMatrix
scaleSelf
optional
unrestricted
double
scaleX
= 1,
optional
unrestricted
double
scaleY
optional
unrestricted
double
scaleZ
= 1,
optional
unrestricted
double
originX
= 0,
optional
unrestricted
double
originY
= 0,
optional
unrestricted
double
originZ
= 0);
DOMMatrix
scale3dSelf
optional
unrestricted
double
scale
= 1,
optional
unrestricted
double
originX
= 0,
optional
unrestricted
double
originY
= 0,
optional
unrestricted
double
originZ
= 0);
DOMMatrix
rotateSelf
optional
unrestricted
double
rotX
= 0,
optional
unrestricted
double
rotY
optional
unrestricted
double
rotZ
);
DOMMatrix
rotateFromVectorSelf
optional
unrestricted
double
= 0,
optional
unrestricted
double
= 0);
DOMMatrix
rotateAxisAngleSelf
optional
unrestricted
double
= 0,
optional
unrestricted
double
= 0,
optional
unrestricted
double
= 0,
optional
unrestricted
double
angle
= 0);
DOMMatrix
skewXSelf
optional
unrestricted
double
sx
= 0);
DOMMatrix
skewYSelf
optional
unrestricted
double
sy
= 0);
DOMMatrix
invertSelf
();

Exposed
Window
DOMMatrix
setMatrixValue
DOMString
transformList
);
};
dictionary
DOMMatrix2DInit
unrestricted
double
unrestricted
double
unrestricted
double
unrestricted
double
unrestricted
double
unrestricted
double
unrestricted
double
m11
unrestricted
double
m12
unrestricted
double
m21
unrestricted
double
m22
unrestricted
double
m41
unrestricted
double
m42
};
dictionary
DOMMatrixInit
DOMMatrix2DInit
unrestricted
double
m13
= 0;
unrestricted
double
m14
= 0;
unrestricted
double
m23
= 0;
unrestricted
double
m24
= 0;
unrestricted
double
m31
= 0;
unrestricted
double
m32
= 0;
unrestricted
double
m33
= 1;
unrestricted
double
m34
= 0;
unrestricted
double
m43
= 0;
unrestricted
double
m44
= 1;
boolean
is2D
};
CanIUse
Support:
Android Browser (limited)
4+
Baidu Browser (limited)
13.52+
Blackberry Browser (limited)
10+
Chrome (limited)
8+
Chrome for Android (limited)
147+
Edge (limited)
12+
Firefox (limited)
33+
Firefox for Android (limited)
150+
IE (limited)
10+
IE Mobile (limited)
10+
KaiOS Browser (limited)
2.5+
Opera (limited)
15+
Opera Mini
None
Opera Mobile (limited)
80+
QQ Browser (limited)
14.9+
Safari (limited)
5+
Safari on iOS (limited)
5.0+
Samsung Internet (limited)
4+
UC Browser for Android (limited)
15.5+
Source:
caniuse.com
as of 2026-04-22