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.
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
BCD tables only load in the browser
api.DOMMatrixReadOnly
BCD tables only load in the browser
api.DOMPoint
BCD tables only load in the browser
api.DOMQuad
BCD tables only load in the browser
api.DOMRect
BCD tables only load in the browser
api.DOMRectReadOnly
BCD tables only load in the browser
See also
Path2D.addPath()
CanvasPattern.setTransform()
CanvasRenderingContext2D.getTransform()
CanvasRenderingContext2D.setTransform()
CSSTransformValue.toMatrix()
CSSTransformComponent.toMatrix()
Element.getBoundingClientRect()
Element.getClientRects()
VideoFrame.visibleRect
XRLightEstimate
XRRigidTransform