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 andtransformation 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 ofCSS Transforms, theCanvas API, theWebXR Device API, and (more directly)VideoFrame.visibleRect,Element.getClientRects(), andElement.getBoundingClientRect().
Interfaces
DOMMatrixRepresents atransformation 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.
DOMMatrixReadOnlyRead-only version of
DOMMatrix.DOMPointRepresents 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.
DOMPointReadOnlyRead-only version of
DOMPoint.DOMQuadRepresents a collection of four
DOMPointobjects defining the corners of aquadrilateral.DOMRectRepresents the size and position of a rectangle.
DOMRectReadOnlyRead-only version of
DOMRect.
Examples
ThePath2D.addPath() andCanvasPattern.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 |