Geometry interfaces
Geometry interfaces is a CSS module that provides interfaces for working with 3D and 2D graphics — in particular, for working with points, rectangles, quadrilaterals and transformation matrices (for operations that translate/move, scale, rotate, skew/shear/slant, and flip graphics, as well as for multiplying/chaining and inverting/undoing those operations).
As a web developer, you don't always use the geometry interfaces directly, but instead use other features that rely on them behind the scenes: parts of CSS Transforms, the Canvas API, the WebXR Device API, and (more directly) VideoFrame.visibleRect
, Element.getClientRects()
, and Element.getBoundingClientRect()
.
Interfaces
DOMMatrix
-
Represents a transformation matrix, for operations that translate/move, scale, rotate, skew/shear/slant, and flip graphics, as well as for multiplying/chaining and inverting/undoing those operations.
DOMMatrixReadOnly
-
Read-only version of
DOMMatrix
. DOMPoint
-
Represents a 2D or 3D point in a coordinate system; it includes values for the coordinates in up to three dimensions, as well as an optional perspective value.
DOMPointReadOnly
-
Read-only version of
DOMPoint
. DOMQuad
-
Represents a collection of four
DOMPoint
objects defining the corners of a quadrilateral. DOMRect
-
Represents the size and position of a rectangle.
DOMRectReadOnly
-
Read-only version of
DOMRect
.
Examples
The Path2D.addPath()
and CanvasPattern.setTransform()
articles have examples that use some of the geometry interfaces.
Specifications
Specification |
---|
Geometry Interfaces Module Level 1 # DOMMatrix |
Geometry Interfaces Module Level 1 # DOMPoint |
Geometry Interfaces Module Level 1 # DOMQuad |
Geometry Interfaces Module Level 1 # DOMRect |
Browser compatibility
api.DOMMatrix
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
DOMMatrix | ||||||||||||
DOMMatrix() constructor | ||||||||||||
a | ||||||||||||
b | ||||||||||||
c | ||||||||||||
d | ||||||||||||
e | ||||||||||||
f | ||||||||||||
fromFloat32Array() static method | ||||||||||||
fromFloat64Array() static method | ||||||||||||
fromMatrix() static method | ||||||||||||
invertSelf | ||||||||||||
m11 | ||||||||||||
m12 | ||||||||||||
m13 | ||||||||||||
m14 | ||||||||||||
m21 | ||||||||||||
m22 | ||||||||||||
m23 | ||||||||||||
m24 | ||||||||||||
m31 | ||||||||||||
m32 | ||||||||||||
m33 | ||||||||||||
m34 | ||||||||||||
m41 | ||||||||||||
m42 | ||||||||||||
m43 | ||||||||||||
m44 | ||||||||||||
multiplySelf | ||||||||||||
preMultiplySelf | ||||||||||||
rotateAxisAngleSelf | ||||||||||||
rotateFromVectorSelf | ||||||||||||
rotateSelf | ||||||||||||
scale3dSelf() | ||||||||||||
scaleSelf() | ||||||||||||
setMatrixValue | ||||||||||||
skewXSelf | ||||||||||||
skewYSelf | ||||||||||||
translateSelf | ||||||||||||
Available in workers |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- See implementation notes.
- Uses a non-standard name.
- Has more compatibility info.
api.DOMMatrixReadOnly
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
DOMMatrixReadOnly | ||||||||||||
DOMMatrixReadOnly() constructor | ||||||||||||
a | ||||||||||||
b | ||||||||||||
c | ||||||||||||
d | ||||||||||||
e | ||||||||||||
f | ||||||||||||
flipX() | ||||||||||||
flipY() | ||||||||||||
fromFloat32Array() static method | ||||||||||||
fromFloat64Array() static method | ||||||||||||
fromMatrix() static method | ||||||||||||
inverse() | ||||||||||||
is2D | ||||||||||||
isIdentity | ||||||||||||
m11 | ||||||||||||
m12 | ||||||||||||
m13 | ||||||||||||
m14 | ||||||||||||
m21 | ||||||||||||
m22 | ||||||||||||
m23 | ||||||||||||
m24 | ||||||||||||
m31 | ||||||||||||
m32 | ||||||||||||
m33 | ||||||||||||
m34 | ||||||||||||
m41 | ||||||||||||
m42 | ||||||||||||
m43 | ||||||||||||
m44 | ||||||||||||
multiply() | ||||||||||||
rotate() | ||||||||||||
rotateAxisAngle() | ||||||||||||
rotateFromVector() | ||||||||||||
scale() | ||||||||||||
scale3d() | ||||||||||||
scaleNonUniform() | ||||||||||||
skewX() | ||||||||||||
skewY() | ||||||||||||
toFloat32Array() | ||||||||||||
toFloat64Array() | ||||||||||||
toJSON() | ||||||||||||
toString() | ||||||||||||
transformPoint() | ||||||||||||
translate() | ||||||||||||
Available in workers |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Deprecated. Not for use in new websites.
- See implementation notes.
api.DOMPoint
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
DOMPoint | ||||||||||||
DOMPoint() constructor | ||||||||||||
fromPoint() static method | ||||||||||||
w | ||||||||||||
Available in workers | ||||||||||||
x | ||||||||||||
y | ||||||||||||
z |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
api.DOMPointReadOnly
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
DOMPointReadOnly | ||||||||||||
DOMPointReadOnly() constructor | ||||||||||||
fromPoint() static method | ||||||||||||
matrixTransform() | ||||||||||||
toJSON() | ||||||||||||
w | ||||||||||||
Available in workers | ||||||||||||
x | ||||||||||||
y | ||||||||||||
z |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
api.DOMQuad
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
DOMQuad | ||||||||||||
DOMQuad() constructor | ||||||||||||
fromQuad() static method | ||||||||||||
fromRect() static method | ||||||||||||
getBounds() | ||||||||||||
p1 | ||||||||||||
p2 | ||||||||||||
p3 | ||||||||||||
p4 | ||||||||||||
toJSON() | ||||||||||||
Available in workers |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- See implementation notes.
api.DOMRect
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
DOMRect | ||||||||||||
DOMRect() constructor | ||||||||||||
fromRect() static method | ||||||||||||
height | ||||||||||||
width | ||||||||||||
Available in workers | ||||||||||||
x | ||||||||||||
y |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Uses a non-standard name.
- Has more compatibility info.
api.DOMRectReadOnly
Report problems with this compatibility data on GitHubLegend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Uses a non-standard name.
- Has more compatibility info.
See also
Path2D.addPath()
CanvasPattern.setTransform()
CanvasRenderingContext2D.getTransform()
CanvasRenderingContext2D.setTransform()
CSSTransformValue.toMatrix()
CSSTransformComponent.toMatrix()
Element.getBoundingClientRect()
Element.getClientRects()
VideoFrame.visibleRect
XRLightEstimate
XRRigidTransform