web api instance method
DOMMatrixReadOnly: scale3d() method
Available in workers
The scale3d() method of the DOMMatrixReadOnly interface creates a new matrix which is the result of a 3D scale transform being applied
to the matrix. It returns a new DOMMatrix created by scaling the source 3d matrix by the given scale factor centered on the origin point specified by the origin parameters, with a default origin of (0, 0, 0). The original matrix is not modified.
To mutate the matrix as you 3D-scale it, see scale3dSelf()
Syntax
scale3d()
scale3d(scale)
scale3d(scale, originX)
scale3d(scale, originX, originY)
scale3d(scale, originX, originY, originZ)
Parameters
scale- : A multiplier; the scale value. If no scale is supplied, this defaults to
1.
- : A multiplier; the scale value. If no scale is supplied, this defaults to
originXOptional- : An x-coordinate for the origin of the transformation. If no origin is supplied, this defaults to
0.
- : An x-coordinate for the origin of the transformation. If no origin is supplied, this defaults to
originYOptional- : A y-coordinate for the origin of the transformation. If no origin is supplied, this defaults to
0.
- : A y-coordinate for the origin of the transformation. If no origin is supplied, this defaults to
originZOptional- : A z-coordinate for the origin of the transformation. If this value is
0, the default if omitted, the resulting matrix may not be 3d.
- : A z-coordinate for the origin of the transformation. If this value is
Return value
A DOMMatrix.
Examples
const matrix = new DOMMatrix();
console.log(matrix.toString()); // no transforms applied
// matrix(1, 0, 0, 1, 0, 0)
console.log(matrix.scale3d(2).toString());
/* matrix3d(
2, 0, 0, 0,
0, 2, 0, 0,
0, 0, 2, 0,
0, 0, 0, 1) */
console.log(matrix.scale3d(0.5, 25, 25, 1.25).toString());
/* matrix3d(
0.5, 0, 0, 0,
0, 0.5, 0, 0,
0, 0, 0.5, 0, 1
2.5, 12.5, 0.625, 1) */
console.log(matrix.toString()); // original matrix is unchanged
// matrix(1, 0, 0, 1, 0, 0)
Specifications
SpecificationsStandards references are available on the canonical MDN page.
Browser compatibility
Browser compatibilityCompatibility data is available on the canonical MDN page.
See also
scale3dSelf()scale()- CSS
transformproperty andscale3d()andmatrix3d()functions - CSS transforms module
- SVG
transformattribute CanvasRenderingContext2Dinterface’stransform()method