CSSTransformValue: toMatrix() method
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Want more browser support for this feature? Tell us why.
Note: This feature is available in Web Workers.
The toMatrix() method of the CSSTransformValue interface returns a DOMMatrix object.
The returned matrix is the product of the matrices of each CSSTransformComponent in the CSSTransformValue, computed by calling CSSTransformComponent.toMatrix() on each component in turn and multiplying the results together, in order.
Syntax
toMatrix()
Parameters
None.
Return value
A DOMMatrix object.
Exceptions
TypeError-
Raised if any lengths involved in generating the matrix are not compatible units with px (such as relative lengths or percentages).
Examples
Converting a transform to a matrix
const transform = new CSSTransformValue([
new CSSTranslate(CSS.px(10), CSS.px(20)),
new CSSScale(2, 3),
]);
const matrix = transform.toMatrix();
console.log(matrix.a, matrix.d); // 2 3
console.log(matrix.e, matrix.f); // 10 20
Handling incompatible units
toMatrix() throws if a component's length can't be resolved to pixels, such as a percentage:
const transform = new CSSTransformValue([
new CSSTranslate(CSS.percent(50), CSS.px(20)),
]);
try {
transform.toMatrix();
} catch (e) {
console.log(e); // TypeError
}
Specifications
| Specification |
|---|
| CSS Typed OM Level 1 # dom-csstransformvalue-tomatrix |