matrix() - CSS: Cascading Style Sheets
the matrix() css function defines a homogeneous 2d transformation matrix.
... syntax the matrix() function is specified with six values.
... skewx(), scaley(), translatex(), translatey() ) examples html <div>normal</div> <div class="changed">changed</div> css div { width: 80px; height: 80px; background-color: skyblue; } .changed { transform: matrix(1, 2, -1, 1, 80, 80); background-color: pink; } result specifications specification status comment css transforms level 1the definition of 'matrix()' in that specification.

WebGL model view projection - Web APIs
in the box demo, an additional computesimpleprojectionmatrix() method is added.
... let's take a look at a perspectivematrix() function, which computes the perspective projection matrix.
... in the latest version of the box demo, the computesimpleprojectionmatrix() method has been replaced with the computeperspectivematrix() method.
...And 3 more matches

CanvasPattern.setTransform() - Web APIs
html <canvas id="canvas"></canvas> <svg id="svg1"></svg> javascript var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); var svg1 = document.getelementbyid('svg1'); var matrix = svg1.createsvgmatrix(); var img = new image(); img.src = 'https://mdn.mozillademos.org/files/222/canvas_createpattern.png'; img.onload = function() { var pattern = ctx.createpattern(img, 'repeat'); pattern.settransform(matrix.rotate(-45).scale(1.5)); ctx.fillstyle = pattern; ctx.fillrect(0, 0, 400, 400); }; note that newer browser versions started to support dommatrix as an input to settransform(), so for e...
...5)); ctx.fillstyle = pattern; ctx.fillrect(0, 0, 400, 400); };</textarea> var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var edit = document.getelementbyid('edit'); var code = textarea.value; var svg1 = document.getelementbyid('svg1'); var matrix = svg1.createsvgmatrix(); function drawcanvas() { ctx.clearrect(0, 0, canvas.width, canvas.height); eval(textarea.value); } reset.addeventlistener('click', function() { textarea.value = code; drawcanvas(); }); edit.addeventlistener('click', function() { textarea.focus(); }) textarea.addeventlistener('input', drawcanvas); window.addeventlistener('load', drawcanvas); specifications specificatio...

DOMMatrix - Web APIs
constructor dommatrix() creates and returns a new dommatrix object.
... frommatrix() creates a new mutable dommatrix object given an existing matrix or a dommatrixinit dictionary which provides the values for its properties.

DOMMatrixReadOnly - Web APIs
see the matrix() css function for details on this syntax.
... frommatrix() creates a new mutable dommatrix object given an existing matrix or a dommatrixinit dictionary which provides the values for its properties.

Index - Web APIs
719 dommatrix() api, constructor, experimental, geometry, geometry interfaces, reference, matrix the dommatrix constructor creates a new dommatrix object which represents 4x4 matrices, suitable for 2d and 3d operations..
... 2828 orientationsensor.populatematrix() api, generic sensor api, method, orientation sensor api, orientationsensor, reference, sensor, sensor apis, sensors, populatematrix() the populatematrix method of the orientationsensor interface populates the given target matrix with the rotation matrix based on the latest sensor reading.

Path2D.addPath() - Web APIs
we then create a matrix using document.createelementns() and createsvgmatrix().
... document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // create first path and add a rectangle let p1 = new path2d(); p1.rect(0, 0, 100, 150); // create second path and add a rectangle let p2 = new path2d(); p2.rect(0, 0, 100, 75); // create transformation matrix that moves 200 points to the right let m = document.createelementns('http://www.w3.org/2000/svg', 'svg').createsvgmatrix(); m.a = 1; m.b = 0; m.c = 0; m.d = 1; m.e = 200; m.f = 0; // add second path to the first path p1.addpath(p2, m); // draw the first path ctx.fill(p1); result specifications specification status comment html living standardthe definition of 'path2d.addpath()' in that specification.

SVGSVGElement - Web APIs
svgsvgelement.createsvgmatrix() creates an svgmatrix object outside of any document trees.
... svgsvgelement.createsvgtransformfrommatrix() creates an svgtransform object outside of any document trees.

Movement, orientation, and motion: A WebXR example - Web APIs
the last few lines of code added for this example are four calls to displaymatrix(), a function which displays the contents of a matrix for analysis by the user.
...the displaymatrix() method is used for this; this function uses mathml to render the matrix, falling back to a more array-like format if mathml isn't supported by the user's browser.

CSS3 - Archive of obsolete content
the supported transforms are: matrix(), translate(), translatex(), translatey(), scale(), scalex(), scaley(), rotate(), skewx(), and skewy().

OrientationSensor - Web APIs
methods orientationsensor.populatematrix() populates the given object with the rotation matrix based on the latest sensor reading.

Viewpoints and viewers: Simulating cameras in WebXR - Web APIs
0, 0, f, 0, 0, 0, 0, 1 ]; } with the transform matrix in hand, we simply apply the transform scaletransform to the vector (or vertex) myvector: let myvector = [2, 1, -3]; let scaletransform = [ 2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1 ]; vec4.transformmat4(myvector, myvector, scaletransform); or, using scaling along every axis by the same factor using the createscalingmatrix() function shown above: let myvector = [2, 1, -3]; vec4.transformmat4(myvector, myvector, createscalingmatrix(2.0)); panning (yawing left or right) panning or yaw is the rotation of the camera left to right or right to left, with its base otherwise fixed in place.

CSS reference - CSS: Cascading Style Sheets
style-typelocal()mmarginmargin-blockmargin-block-endmargin-block-startmargin-bottommargin-inlinemargin-inline-endmargin-inline-startmargin-leftmargin-rightmargin-top::markermarks (@page)maskmask-bordermask-border-modemask-border-outsetmask-border-repeatmask-border-slicemask-border-sourcemask-border-widthmask-clipmask-compositemask-imagemask-modemask-originmask-positionmask-repeatmask-sizemask-typematrix()matrix3d()max()max-block-sizemax-heightmax-height (@viewport)max-inline-sizemax-widthmax-width (@viewport)max-zoom (@viewport)@mediamin()min-block-sizemin-heightmin-height (@viewport)min-inline-sizemin-widthmin-width (@viewport)min-zoom (@viewport)minmax()mix-blend-modemmmsn@namespacenegative (@counter-style):not:nth-child:nth-last-child:nth-last-of-type:nth-of-type<number>oobject-fitobject-positi...