TransformStream - Web APIs
the transformstream interface of the streams api represents a set of transformable data.
... constructor transformstream() creates and returns a transform stream object from the given handlers.
... properties transformstream.readable read only the readable end of a transformstream.
...And 8 more matches

XRView.transform - Web APIs
the read-only transform property of the xrview interface is an xrrigidtransform object which provides the position and orientation of the viewpoint relative to the xrreferencespace specified when the xrframe.getviewerpose() method was called to obtain the view object.
... with the transform, you can then position the view as a camera within the 3d scene.
... if you instead need the more traditional view matrix, you can get using view.transform.inverse.matrix; this gets the underlying matrix of the transform's inverse.
...And 8 more matches

An Overview - XSLT: Extensible Stylesheet Language Transformations
« transforming xml with xslt the extensible stylesheet language/transform is a very powerful language, and a complete discussion of it is well beyond the scope of this article, but a brief discussion of some basic concepts will be helpful in understanding the description of netscape's capabilities that follows.
...so the model for transformation is that one xml document is used to transform another xml document.
... the outermost element in an xslt stylesheet must be the <xsl:stylesheet> element (an acceptable alternate is the <xsl:transform> element).
...And 8 more matches

XRRigidTransform.matrix - Web APIs
the read-only xrrigidtransform property matrix returns the transform matrix represented by the object.
... syntax let matrix = xrrigidtransform.matrix; value a float32array containing 16 entries which represents the 4x4 transform matrix which is described by the position and orientation properties.
... usage notes matrix format all 4x4 transform matrices used in webgl are stored in 16-element float32arrays.
...And 7 more matches

XSL Transformations in Mozilla FAQ - Web APIs
the xslt namespace is http://www.w3.org/1999/xsl/transform.
...most come from what we suspect ie to do after the transformation.
...mozilla in contrast renders exactly the result of your transformation.
...And 7 more matches

gradientTransform - SVG: Scalable Vector Graphics
the gradienttransform attribute contains the definition of an optional additional transformation from the gradient coordinate system onto the target coordinate system (i.e., userspaceonuse or objectboundingbox).
...this additional transformation matrix is post-multiplied to (i.e., inserted to the right of) any previously defined transformations, including the implicit transformation necessary to convert from object bounding box units to user space.
...ialgradient id="gradient1" gradientunits="userspaceonuse" cx="100" cy="100" r="100" fx="100" fy="100"> <stop offset="0%" stop-color="darkblue" /> <stop offset="50%" stop-color="skyblue" /> <stop offset="100%" stop-color="darkblue" /> </radialgradient> <radialgradient id="gradient2" gradientunits="userspaceonuse" cx="100" cy="100" r="100" fx="100" fy="100" gradienttransform="skewx(20) translate(-35, 0)"> <stop offset="0%" stop-color="darkblue" /> <stop offset="50%" stop-color="skyblue" /> <stop offset="100%" stop-color="darkblue" /> </radialgradient> <rect x="0" y="0" width="200" height="200" fill="url(#gradient1)" /> <rect x="0" y="0" width="200" height="200" fill="url(#gradient2)" style="transform: translatex(220px);" /> </svg> usage notes ...
...And 7 more matches

CanvasRenderingContext2D.setTransform() - Web APIs
the canvasrenderingcontext2d.settransform() method of the canvas 2d api resets (overrides) the current transformation to the identity matrix, and then invokes a transformation described by the arguments of this method.
... note: see also the transform() method; instead of overriding the current transform matrix, it multiplies it with a given one.
... syntax ctx.settransform(a, b, c, d, e, f); ctx.settransform(matrix); the transformation matrix is described by: [acebdf001]\left[ \begin{array}{ccc} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{array} \right] parameters settransform() has two types of parameter that it can accept.
...And 6 more matches

XRRigidTransform() - Web APIs
the xrrigidtransform() constructor creates and returns a new xrrigidtransform object, representing the position and orientation of a point or object.
... among other things, xrrigidtransform is used when providing a transform to translate between coordinate systems across spaces.
... syntax let xrrigidtransform = new xrrigidtransform(position, orientation); parameters position optional an object conforming to dompointinit which specifies the coordinates at which the point or object is located.
...And 5 more matches

transform-box - CSS: Cascading Style Sheets
the transform-box css property defines the layout box to which the transform and transform-origin properties relate.
... /* keyword values */ transform-box: content-box; transform-box: border-box; transform-box: fill-box; transform-box: stroke-box; transform-box: view-box; /* global values */ transform-box: inherit; transform-box: initial; transform-box: unset; syntax the transform-box property is specified as one of the keyword values listed below.
... formal definition initial valueview-boxapplies totransformable elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax content-box | border-box | fill-box | stroke-box | view-box examples svg transform-origin scoping in this example we have an svg: <svg id="svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 50 50"> <g> <circle id="center" fill="red" r="1" transform="translate(25 25)" /> <circle id="boxcenter" f...
...And 5 more matches

transform-style - CSS: Cascading Style Sheets
the transform-style css property sets whether children of an element are positioned in the 3d space or are flattened in the plane of the element.
... syntax /* keyword values */ transform-style: flat; transform-style: preserve-3d; /* global values */ transform-style: inherit; transform-style: initial; transform-style: unset; values flat indicates that the children of the element are lying in the plane of the element itself.
... formal definition initial valueflatapplies totransformable elementsinheritednocomputed valueas specifiedanimation typediscretecreates stacking contextyes formal syntax flat | preserve-3d examples transform style demonstration in this example we have a 3d cube created using transforms.
...And 5 more matches

JavaScript/XSLT Bindings - XSLT: Extensible Stylesheet Language Transformations
javascript/xslt bindings javascript can run xslt transformations through the xsltprocessor object.
... once instantiated, an xsltprocessor has an xsltprocessor.importstylesheet() method that takes as an argument the xslt stylesheet to be used in the transformation.
...r var xsltprocessor = new xsltprocessor(); // load the xsl file using synchronous (third param is set to false) xmlhttprequest var myxmlhttprequest = new xmlhttprequest(); myxmlhttprequest.open("get", "example.xsl", false); myxmlhttprequest.send(null); var xslref = myxmlhttprequest.responsexml; // finally import the .xsl xsltprocessor.importstylesheet(xslref); for the actual transformation, xsltprocessor requires an xml document, which is used in conjunction with the imported xsl file to produce the final result.
...And 5 more matches

CanvasRenderingContext2D.resetTransform() - Web APIs
the canvasrenderingcontext2d.resettransform() method of the canvas 2d api resets the current transform to the identity matrix.
... syntax void ctx.resettransform(); examples resetting the matrix this example draws a rotated rectangle after modifying the matrix, and then resets the matrix using the resettransform() method.
... html <canvas id="canvas"></canvas> javascript the rotate() method rotates the transformation matrix by 45°.
...And 4 more matches

WebGL2RenderingContext.isTransformFeedback() - Web APIs
the webgl2renderingcontext.istransformfeedback() method of the webgl 2 api returns true if the passed object is a valid webgltransformfeedback object.
... syntax glboolean gl.istransformfeedback(transformfeedback); parameters transformfeedback a webgltransformfeedback object to test.
... return value a glboolean indicating whether the given object is a valid webgltransformfeedback object (true) or not (false).
...And 4 more matches

XRRigidTransform.inverse - Web APIs
the read-only inverse property of the xrrigidtransform interface returns another xrrigidtransform object which is the inverse of its owning transform.
... that is, you can always get the inverse of any xrrigidtransform using its inverse property, instead of having to explicitly generate it.
... syntax let transforminverse = xrrigidtransform.inverse; value an xrrigidtransform which contains the inverse of the xrrigidtransform on which it's accessed.
...And 4 more matches

patternTransform - SVG: Scalable Vector Graphics
the patterntransform attribute defines a list of transform definitions that are applied to a pattern tile.
... only one element is using this attribute: <pattern> html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- apply a transform on the tile --> <pattern id="p1" width=".25" height=".25" patterntransform="rotate(20) skewx(30) scale(1 0.5)"> <circle cx="10" cy="10" r="10" /> </pattern> <!-- apply the transformed pattern tile --> <rect x="10" y="10" width="80" height="80" fill="url(#p1)" /> </svg> pattern for <pattern>, patterntransform defines a list of transform definitions that are applied to a pattern tile.
... note: as of svg2, it is also allowed to use the css transform property.
...And 4 more matches

Building TransforMiiX standalone - Archive of obsolete content
we support building a standalone version of transformiix on windows, unix and os x.
...add tx_exe=1 mk_add_options build_modules="xpcom transformiix" ac_add_options --enable-standalone-modules="xpcom transformiix" to your .mozconfig, and use client.mk to pull as usual.
... this will pull the necessary subtree with mozilla/client.mk mozilla/build/unix/modules.mk mozilla/build mozilla/config mozilla/expat mozilla/extensions/transformiix mozilla/include mozilla/allmakefiles.sh mozilla/client.mk mozilla/aclocal.m4 mozilla/configure mozilla/configure.in mozilla/makefile.in plus nspr and xpcom from the cvs repository.
...And 3 more matches

CanvasPattern.setTransform() - Web APIs
the canvaspattern.settransform() method uses an svgmatrix or dommatrix object as the pattern's transformation matrix and invokes it on the pattern.
... syntax void pattern.settransform(matrix); parameters matrix an svgmatrix or dommatrix to use as the pattern's transformation matrix.
... examples using the settransform method this is just a simple code snippet which uses the settransform method to create a canvaspattern with the specified pattern transformation from an svgmatrix.
...And 3 more matches

CanvasRenderingContext2D.getTransform() - Web APIs
the canvasrenderingcontext2d.gettransform() method of the canvas 2d api retrieves the current transformation matrix being applied to the context.
... syntax let storedtransform = ctx.gettransform(); parameters none.
... the transformation matrix is described by: [acebdf001]\left[ \begin{array}{ccc} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{array} \right] note: the returned object is not live, so updating it will not affect the current transformation matrix, and updating the current transformation matrix will not affect an already returned dommatrix.
...And 3 more matches

SVGAnimatedTransformList - Web APIs
svg animated transform list interface the svganimatedtransformlist interface is used for attributes which take a list of numbers and which can be animated.
... interface overview also implement none methods none properties readonly svgtransformlist baseval readonly svgtransformlist animval normative document svg 1.1 (2nd edition) properties name type description baseval svgtransformlist the base value of the given attribute before applying any animations.
... animval svgtransformlist a read only svgtransformlist representing the current animated value of the given attribute.
...And 3 more matches

WebGL2RenderingContext.bindTransformFeedback() - Web APIs
the webgl2renderingcontext.bindtransformfeedback() method of the webgl 2 api binds a passed webgltransformfeedback object to the current gl state.
... syntax void gl.bindtransformfeedback(target, transformfeedback); parameters target a glenum specifying the target (binding point).
... must be gl.transform_feedback.
...And 3 more matches

WebGL2RenderingContext.createTransformFeedback() - Web APIs
the webgl2renderingcontext.createtransformfeedback() method of the webgl 2 api creates and initializes webgltransformfeedback objects.
... syntax webgltransformfeedback gl.createtransformfeedback(); parameters none.
... return value a webgltransformfeedback object.
...And 3 more matches

WebGL2RenderingContext.deleteTransformFeedback() - Web APIs
the webgl2renderingcontext.deletetransformfeedback() method of the webgl 2 api deletes a given webgltransformfeedback object.
... syntax void gl.deletetransformfeedback(transformfeedback); parameters transformfeedback a webgltransformfeedback object to delete.
...webgltransformfeedback objects are not available in webgl 1.
...And 3 more matches

XRReferenceSpaceEvent.transform - Web APIs
the read-only xrreferencespaceevent property transform indicates the position and orientation of the affected referencespace's native origin after the changes the event represents are applied.
... the transform is defined using the old coordinate system, which allows it to be used to convert coordinates from the pre-event coordinate system to the post-event coordiante system.
... syntax let refspace = xrreferencespaceevent.transform; value an xrrigidtransform object providing a transform that can be used to convert coordinates from the pre-event coordinate system to the post-event coordinate system.
...And 3 more matches

-webkit-transform-2d - CSS: Cascading Style Sheets
the -webkit-transform-2d boolean css media feature is a chrome extension whose value is true if vendor-prefixed css 2d transforms are supported.
... syntax -webkit-transform-2d is a boolean css media feature whose value is true if the browser supports -webkit prefixed css 2d transforms.
... values true the browser supports the 2d css transforms with the -webkit prefix.
...And 3 more matches

transform-origin - SVG: Scalable Vector Graphics
the transform-origin svg attribute sets the origin for an item’s transformations.
... note: as a presentation attribute in svg, transform-origin corresponds in syntax and behavior to the transform-origin property in css, and can be used as css property to style svg.
... see the css transform-origin property for more information.
...And 3 more matches

CanvasRenderingContext2D.currentTransform - Web APIs
the canvasrenderingcontext2d.currenttransform property of the canvas 2d api returns or sets a dommatrix (current specification) or svgmatrix (old specification) object for the current transformation matrix.
... syntax ctx.currenttransform [= value]; value a dommatrix or svgmatrix object to use as the current transformation matrix.
... examples manually changing the matrix this example uses the currenttransform property to set a transformation matrix.
...And 2 more matches

WebGL2RenderingContext.pauseTransformFeedback() - Web APIs
the webgl2renderingcontext.pausetransformfeedback() method of the webgl 2 api pauses a transform feedback operation.
... syntax void gl.pausetransformfeedback(); parameters none.
... examples var transformfeedback = gl.createtransformfeedback(); gl.bindtransformfeedback(gl.transform_feedback, transformfeedback); gl.begintransformfeedback(gl.triangles); gl.pausetransformfeedback(); //...
...And 2 more matches

WebGL2RenderingContext.resumeTransformFeedback() - Web APIs
the webgl2renderingcontext.resumetransformfeedback() method of the webgl 2 api resumes a transform feedback operation.
... syntax void gl.resumetransformfeedback(); parameters none.
... examples var transformfeedback = gl.createtransformfeedback(); gl.bindtransformfeedback(gl.transform_feedback, transformfeedback); gl.begintransformfeedback(gl.triangles); gl.pausetransformfeedback(); //...
...And 2 more matches

WebGLTransformFeedback - Web APIs
the webgltransformfeedback interface is part of the webgl 2 api and enables transform feedback, which is the process of capturing primitives generated by vertex processing.
... it allows to preserve the post-transform rendering state of an object and resubmit this data multiple times.
... when working with webgltransformfeedback objects, the following methods of the webgl2renderingcontext are useful: webgl2renderingcontext.createtransformfeedback() webgl2renderingcontext.deletetransformfeedback() webgl2renderingcontext.istransformfeedback() webgl2renderingcontext.bindtransformfeedback() webgl2renderingcontext.begintransformfeedback() webgl2renderingcontext.endtransformfeedback() webgl2renderingcontext.pausetransformfeedback() webgl2renderingcontext.resumetransformfeedback() webgl2renderingcontext.transformfeedbackvaryings() webgl2renderingcontext.gettransformfeedbackvarying() examples creating a webgltransformfeedback object in this example, gl must be a webgl2renderingcontext.
...And 2 more matches

-webkit-transform-3d - CSS: Cascading Style Sheets
the -webkit-transform-3d boolean css media feature is a chrome extension whose value is true if vendor-prefixed css 3d transforms are supported.
... syntax -webkit-transform-3d is a boolean css media feature whose value is true if the browser supports -webkit prefixed css 3d transforms.
... values true the browser supports the 3d css transforms with the -webkit prefix.
...And 2 more matches

<animateTransform> - SVG: Scalable Vector Graphics
the animatetransform element animates a transformation attribute on its target element, thereby allowing animations to control translation, scaling, rotation, and/or skewing.
... usage context categoriesanimation elementpermitted contentany number of the following elements, in any order:descriptive elements example <svg width="120" height="120" viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <polygon points="60,30 90,90 30,90"> <animatetransform attributename="transform" attributetype="xml" type="rotate" from="0 60 70" to="360 60 70" dur="10s" repeatcount="indefinite"/> </polygon> </svg> live sample attributes global attributes conditional processing attributes » core attributes » animation event attributes » xlink attributes » animation attribute target attributes » ...
... animation timing attributes » animation value attributes » animation addition attributes » externalresourcesrequired specific attributes by from to type dom interface this element implements the svganimatetransformelement interface.
...And 2 more matches

XSLT: Extensible Stylesheet Language Transformations
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes extensible stylesheet language transformations (xslt) is an xml-based language used, in conjunction with specialized processing software, for the transformation of xml documents.
... although the process is referred to as "transformation," the original document is not changed; rather, a new xml document is created based on the content of an existing document.
... transforming xml with xslt xslt allows a stylesheet author to transform a primary xml document in two significant ways: manipulating and sorting the content, including a wholesale reordering of it if so desired, and transforming the content into a different format.
...And 2 more matches

CanvasRenderingContext2D.transform() - Web APIs
the canvasrenderingcontext2d.transform() method of the canvas 2d api multiplies the current transformation with the matrix described by the arguments of this method.
... note: see also the settransform() method, which resets the current transform to the identity matrix and then invokes transform().
... syntax void ctx.transform(a, b, c, d, e, f); the transformation matrix is described by: [acebdf001]\left[ \begin{array}{ccc} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{array} \right] parameters a (m11) horizontal scaling.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.transform(1, .2, .8, 1, 0, 0); ctx.fillrect(0, 0, 100, 100); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.transform' in that specification.

SVGAnimateTransformElement - Web APIs
the svganimatetransformelement interface corresponds to the <animatetransform> element.
...stroke="#d4dde4" stroke-width="2px" /><text x="386" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svganimationelement</text></a><polyline points="291,89 281,84 281,94 291,89" stroke="#d4dde4" fill="none"/><line x1="281" y1="89" x2="251" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svganimatetransformelement" target="_top"><rect x="-9" y="65" width="260" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="121" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svganimatetransformelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties t...
... specifications specification status comment svg animations level 2the definition of 'svganimatetransformelement' in that specification.
... editor's draft no change scalable vector graphics (svg) 1.1 (second edition)the definition of 'svganimatetransformelement' in that specification.

SVGTransformable - Web APIs
svg transformable interface interface svgtransformable contains properties and methods that apply to all elements which have attribute transform.
... interface overview also implement none methods none properties readonly svganimatedtransformlist transform normative document svg 1.1 (2nd edition) properties name type description transform svganimatedtransformlist corresponds to attribute transform on the given element.
... methods the svgtransformable interface do not provide any specific methods.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsvgtransformablechrome ?

WebGL2RenderingContext.beginTransformFeedback() - Web APIs
the webgl2renderingcontext.begintransformfeedback() method of the webgl 2 api starts a transform feedback operation.
... syntax void gl.begintransformfeedback(primitivemode); parameters primitivemode a glenum specifying the output type of the primitives that will be recorded into the buffer objects that are bound for transform feedback.
... examples var transformfeedback = gl.createtransformfeedback(); gl.bindtransformfeedback(gl.transform_feedback, transformfeedback); gl.begintransformfeedback(gl.triangles); gl.drawarrays(gl.triangles, 0, 3); specifications specification status comment webgl 2.0the definition of 'begintransformfeedback' in that specification.
... opengl es 3.0the definition of 'glbegintransformfeedback' in that specification.

WebGL2RenderingContext.endTransformFeedback() - Web APIs
the webgl2renderingcontext.endtransformfeedback() method of the webgl 2 api ends a transform feedback operation.
... syntax void gl.endtransformfeedback(); parameters none.
... examples var transformfeedback = gl.createtransformfeedback(); gl.bindtransformfeedback(gl.transform_feedback, transformfeedback); gl.begintransformfeedback(gl.triangles); gl.drawarrays(gl.triangles, 0, 3); gl.endtransformfeedback(); specifications specification status comment webgl 2.0the definition of 'endtransformfeedback' in that specification.
... opengl es 3.0the definition of 'glendtransformfeedback' in that specification.

WebGL2RenderingContext.getTransformFeedbackVarying() - Web APIs
the webgl2renderingcontext.gettransformfeedbackvarying() method of the webgl 2 api returns information about varying variables from webgltransformfeedback buffers.
... syntax webglactiveinfo gl.gettransformfeedbackvarying(program, index); parameters program a webglprogram.
... examples activeinfo = gl.gettransformfeedbackvarying(program, 0); specifications specification status comment webgl 2.0the definition of 'gettransformfeedbackvarying' in that specification.
... opengl es 3.0the definition of 'glgettransformfeedbackvarying' in that specification.

WebGL2RenderingContext.transformFeedbackVaryings() - Web APIs
the webgl2renderingcontext.transformfeedbackvaryings() method of the webgl 2 api specifies values to record in webgltransformfeedback buffers.
... syntax void gl.transformfeedbackvaryings(program, varyings, buffermode); parameters program a webglprogram.
... examples var transformfeedback = gl.createtransformfeedback(); gl.bindtransformfeedback(gl.transform_feedback, transformfeedback); var transformfeedbackoutputs = ['gl_position', 'anotheroutput']; gl.transformfeedbackvaryings(shaderprog, transformfeedbackoutputs, gl.interleaved_attribs); gl.linkprogram(shaderprog); specifications specification status comment webgl 2.0the definition of 'transformfeedbackvaryings' in that specification.
... opengl es 3.0the definition of 'gltransformfeedbackvaryings' in that specification.

XRReferenceSpaceEventInit.transform - Web APIs
the xrreferencespaceeventinit property transform indicates the position and orientation of the affected reference space's native origin after the changes the event represents are applied.
... the transform is defined using the old coordinate system, which allows it to be used to convert coordinates from the pre-event coordinate system to the post-event coordiante system.
... syntax let eventinitdict = { referencespace: xrreferencespace, transform: xrrigidtransform }); value an xrrigidtransform object providing a transform that can be used to convert coordinates from the pre-event coordinate system to the post-event coordinate system.
... let refspaceevent = new xrreferencespaceevent("reset", { referencespace: myrefspace, transform: mytransform }); specifications specification status comment webxr device apithe definition of 'xrreferencespaceeventinit.transform' in that specification.

XRRigidTransform.orientation - Web APIs
the read-only xrrigidtransform property orientation is a dompointreadonly containing a normalized quaternion (also called a unit quaternion or versor) specifying the rotational component of the transform represented by the object.
... syntax let orientation = xrrigidtransform.orientation; value a dompointreadonly object which contains a unit quaternion providing the orientation component of the transform.
... examples to create a reference space which is oriented to look straight up, positioned 2 meters off of ground level: xrreferencespace = refspace.getoffsetreferencespace( new xrrigidtransform({y: -2}, {x: 0.0, y: 1.0, z: 0.0, w: 1.0}); ); the unit quaternion specified here is [0.0, 1.0, 0.0, 1.0] to indicate that the object should be facing directly along the y axis.
... specifications specification status comment webxr device apithe definition of 'xrrigidtransform.orientation' in that specification.

XRRigidTransform.position - Web APIs
the read-only xrrigidtransform property position is a dompointreadonly object which provides the 3d point, specified in meters, describing the translation component of the transform.
... syntax let pos = xrrigidtransform.position; value a read-only dompointreadonly indicating the 3d position component of the transform matrix.
... refspacecreated(refspace); }).catch(() => { session.requestreferencespace("local-floor").then(refspacecreated); }); } else { session.requestreferencespace("viewer").then(refspacecreated); } } function refspacecreated(refspace) { if (immersivesession) { xrreferencespace = refspace; } else { xrreferencespace = refspace.getoffsetreferencespace( new xrrigidtransform({y: -1.5}); ); } xrsession.requestanimationframe(onframe); } after setting up the graphics context for webxr use, this begins by looking to see if a variable immersivesession is true; if so, we first request a bounded-floor reference space.
... specifications specification status comment webxr device apithe definition of 'xrrigidtransform.position' in that specification.

CSS Transforms - CSS: Cascading Style Sheets
css transforms is a module of css that defines how elements styled with css can be transformed in two-dimensional or three-dimensional space.
... reference properties backface-visibility perspective perspective-origin rotate scale transform transform-box transform-origin transform-style translate data types <transform-function> guides using css transforms step-by-step tutorial about how to transform elements styled with css.
... specifications specification status comment css transforms level 1 working draft initial definition.
... css transforms level 2 editor's draft adds individual transforms.

Using device orientation with 3D transforms - Developer guides
this article provides tips on how to use device orientation information in tandem with css 3d transforms.
... using orientation to rotate an element the easiest way to convert orientation data to a 3d transform is basically to use the alpha, gamma, and beta values as rotatez, rotatex and rotatey values.
...here's a simple code snippet to sum it up: var elem = document.getelementbyid("view3d"); window.addeventlistener("deviceorientation", function(e) { // remember to use vendor-prefixed transform property elem.style.transform = "rotatez(" + ( e.alpha - 180 ) + "deg) " + "rotatex(" + e.beta + "deg) " + "rotatey(" + ( -e.gamma ) + "deg)"; }); orientation compensation compensating the orientation of the device can be useful to create parallax effects or augmented reality.
... this is achieved by inverting the previous order of rotations and negating the alpha value: var elem = document.getelementbyid("view3d"); window.addeventlistener("deviceorientation", function(e) { // again, use vendor-prefixed transform property elem.style.transform = "rotatey(" + ( -e.gamma ) + "deg)" + "rotatex(" + e.beta + "deg) " + "rotatez(" + - ( e.alpha - 180 ) + "deg) "; }); rotate3d to orientation should you ever need to convert a rotate3d axis-angle to orientation euler angles, you can use the following algorithm: // convert a rotate3d axis-angle to deviceorientation angles function orient( aa ) { var x = aa.x, y = aa.y, z = aa.z, a = aa.a, c = math.cos( aa.a ), s = math.sin( aa.a ), t = 1 - c, // axis-angle to rotation matrix ...

Basic Example - XSLT: Extensible Stylesheet Language Transformations
basic example the basic example will load an xml file and apply a xsl transformation on it.
... </myns:body> </myns:article> figure 5 : xslt stylesheet <?xml version="1.0"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/xsl/transform" xmlns:myns="http://devedge.netscape.com/2002/de"> <xsl:output method="html" /> <xsl:template match="/"> <html> <head> <title> <xsl:value-of select="/myns:article/myns:title"/> </title> <style type="text/css"> .mybox {margin:10px 155px 0 50px; border: 1px dotted #639ace; padding:0 5px 0 5px;} </style> ...
...the .xsl file is then imported (xsltprocessor.importstylesheet(xslstylesheet)) and the transformation run (xsltprocessor.transformtofragment(xmldoc, document)).
...et", "example1.xsl", false); myxmlhttprequest.send(null); xslstylesheet = myxmlhttprequest.responsexml; xsltprocessor.importstylesheet(xslstylesheet); // load the xml file, example1.xml myxmlhttprequest = new xmlhttprequest(); myxmlhttprequest.open("get", "example1.xml", false); myxmlhttprequest.send(null); xmldoc = myxmlhttprequest.responsexml; var fragment = xsltprocessor.transformtofragment(xmldoc, document); document.getelementbyid("example").innerhtml = ""; mydom = fragment; document.getelementbyid("example").appendchild(fragment); } ...

XRPose.transform - Web APIs
the transform read-only attribute of the xrpose interface is a xrrigidtransform object providing the position and orientation of the pose relative to the base xrspace as specified when the pose was obtained by calling xrframe.getpose().
... syntax let posetransform = xrpose.transform; value an xrrigidtransform which provides the position and orientation of the xrpose relative to the xrframe to which this xrpose is aligned.
... xrsession.addeventlistener("select", event => { let source = event.inputsource; let frame = event.frame; let targetraypose = frame.getpose(source.targetrayspace, myrefspace); let targetobject = findtargetusingray(targetray.transform.matrix); if (source.targetraymode == "tracked-pointer") { if (source.handedness == user.handedness) { targetobject.primaryaction(); } else { targetobject.offhandaction(); } } }); specifications specification status comment webxr device apithe definition of 'xrpose.transform' in that specification.

<xsl:stylesheet> - XSLT: Extensible Stylesheet Language Transformations
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes the <xsl:stylesheet> element (or the equivalent <xsl:transform> element) is the outermost element of a stylesheet.
...typically this is xmlns:xsl="http://www.w3.org/1999/xsl/transform".
... syntax <xsl:stylesheet version="number" xmlns:xsl="http://www.w3.org/1999/xsl/transform" id="name" extension-element-prefixes="list-of-names" exclude-result-prefixes="list-of-names"> entire stylesheet </xsl:stylesheet> required attributes version specifies the version of xslt required by this stylesheet.

XSLT elements reference - XSLT: Extensible Stylesheet Language Transformations
a top-level element must appear as the child of either <xsl:stylesheet> or <xsl:transform>.
...ribute-set><xsl:attribute><xsl:call-template><xsl:choose><xsl:comment><xsl:copy-of><xsl:copy><xsl:decimal-format><xsl:element><xsl:fallback><xsl:for-each><xsl:if><xsl:import><xsl:include><xsl:key><xsl:message><xsl:namespace-alias><xsl:number><xsl:otherwise><xsl:output><xsl:param><xsl:preserve-space><xsl:processing-instruction><xsl:sort><xsl:strip-space><xsl:stylesheet><xsl:template><xsl:text><xsl:transform><xsl:value-of><xsl:variable><xsl:when><xsl:with-param> <xsl:apply-imports> <xsl:apply-templates> <xsl:attribute> <xsl:attribute-set> <xsl:call-template> <xsl:choose> <xsl:comment> <xsl:copy> <xsl:copy-of> <xsl:decimal-format> <xsl:element> <xsl:fallback> (not supported) <xsl:for-each> <xsl:if> <xsl:import> (mostly supported) <xsl:include> <xsl:key> <xsl:message> <xsl:namespac...
...e-alias> (not supported) <xsl:number> (partially supported) <xsl:otherwise> <xsl:output> (partially supported) <xsl:param> <xsl:preserve-space> <xsl:processing-instruction> <xsl:sort> <xsl:strip-space> <xsl:stylesheet> (partially supported) <xsl:template> <xsl:text> (partially supported) <xsl:transform> <xsl:value-of> (partially supported) <xsl:variable> <xsl:when> <xsl:with-param> ...

Advanced Example - XSLT: Extensible Stylesheet Language Transformations
once the transformation is complete, the result is appended to the document, as shown in this example.
...importnode(mynode, true); // after cloning, we append xmlref.appendchild(clonednode); // set the sorting parameter in the xsl file var sortval = xsltprocessor.getparameter(null, "myorder"); if (sortval == "" || sortval == "descending") xsltprocessor.setparameter(null, "myorder", "ascending"); else xsltprocessor.setparameter(null, "myorder", "descending"); // initiate the transformation var fragment = xsltprocessor.transformtofragment(xmlref, document); // clear the contents document.getelementbyid("example").innerhtml = ""; mydom = fragment; // add the new content from the transformation document.getelementbyid("example").appendchild(fragment) } // xsl stylesheet: <?xml version="1.0" encoding="utf-8"?> <xsl:stylesheet version="1.0" xmlns="http://www.w3.org/...
...1999/xhtml" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:xsl="http://www.w3.org/1999/xsl/transform"> <xsl:output method="html" indent="yes" /> <xsl:param name="myorder" /> <xsl:template match="/"> <xsl:apply-templates select="/div//div"> <xsl:sort select="." data-type="number" order="{$myorder}" /> </xsl:apply-templates> </xsl:template> <xsl:template match="div"> <xsl:copy-of select="." /> </xsl:template> </xsl:stylesheet> ...

Visualize transforms - Firefox Developer Tools
if you hover over a transform property in the rules view, you'll see the transformation overlaid in the page: ...

Common XSLT Errors - XSLT: Extensible Stylesheet Language Transformations
namespace the xslt 1.0 namespace is http://www.w3.org/1999/xsl/transform.

<xsl:attribute-set> - XSLT: Extensible Stylesheet Language Transformations
type top-level, must be the child of <xsl:stylesheet> or <xsl:transform>.

<xsl:decimal-format> - XSLT: Extensible Stylesheet Language Transformations
type top-level, must be the child of <xsl:stylesheet> or <xsl:transform>.

<xsl:import> - XSLT: Extensible Stylesheet Language Transformations
type top-level, must appear before any other child of <xsl:stylesheet> or <xsl:transform> in the importing stylesheet.

<xsl:include> - XSLT: Extensible Stylesheet Language Transformations
type top-level, may appear in any order as a child of <xsl:stylesheet> or <xsl:transform>.

<xsl:key> - XSLT: Extensible Stylesheet Language Transformations
type top-level, must be the child of <xsl:stylesheet> or <xsl:transform>.

<xsl:namespace-alias> - XSLT: Extensible Stylesheet Language Transformations
type top-level, must be the child of <xsl:stylesheet> or <xsl:transform>.

<xsl:output> - XSLT: Extensible Stylesheet Language Transformations
type top-level, must be the child <xsl:stylesheet> or <xsl:transform>.

<xsl:preserve-space> - XSLT: Extensible Stylesheet Language Transformations
type top-level, must be a child of <xsl:stylesheet> or <xsl:transform>.

<xsl:strip-space> - XSLT: Extensible Stylesheet Language Transformations
type top-level, must be a child of <xsl:stylesheet> or <xsl:transform>.

<xsl:template> - XSLT: Extensible Stylesheet Language Transformations
type top-level, must be the child of <xsl:stylesheet> or <xsl:transform>.

<xsl:text> - XSLT: Extensible Stylesheet Language Transformations
optional attributes disable-output-escaping (netscape does not serialize the result of transformation - the "output" below - so this attribute is essentially irrelevant in context.

<xsl:value-of> - XSLT: Extensible Stylesheet Language Transformations
optional attributes disable-output-escaping (netscape does not serialize the result of transformation - the "output" below - so this attribute is essentially irrelevant in context.

PI Parameters - XSLT: Extensible Stylesheet Language Transformations
<?xslt-param name="color" value="blue"?> <?xslt-param name="size" select="2"?> <?xml-stylesheet type="text/xsl" href="style.xsl"?> note that these pis have no effect when transformation is done using the xsltprocessor object in javascript.

For Further Reading - XSLT: Extensible Stylesheet Language Transformations
« transforming xml with xslt print books xslt: programmer's reference, second edition author: michael h.

The Netscape XSLT/XPath Reference - XSLT: Extensible Stylesheet Language Transformations
:message (supported) xsl:namespace-alias (not supported) xsl:number (partially supported) xsl:otherwise (supported) xsl:output (partially supported) xsl:param (supported) xsl:preserve-space (supported) xsl:processing-instruction xsl:sort (supported) xsl:strip-space (supported) xsl:stylesheet (partially supported) xsl:template (supported) xsl:text (partially supported) xsl:transform (supported) xsl:value-of (partially supported) xsl:variable (supported) xsl:when (supported) xsl:with-param (supported) axes ancestor ancestor-or-self attribute child descendant descendant-or-self following following-sibling namespace (not supported) parent preceding preceding-sibling self functions boolean() (supported) ceiling() (supported) concat() (supported)...

Resources - XSLT: Extensible Stylesheet Language Transformations
resources using the mozilla javascript interface to xsl transformations mozilla.org's xslt project page, which includes a frequently encountered issues section.

Setting Parameters - XSLT: Extensible Stylesheet Language Transformations
setting parameters while running transformations using precoded .xsl and .xml files is quite useful, configuring the .xsl file from javascript may be even more useful.

Index - Web APIs
53 analysernode.fftsize api, analysernode, property, reference, web audio api, fftsize the fftsize property of the analysernode interface is an unsigned long value and represents the window size in samples that is used when performing a fast fourier transform (fft) to get frequency domain data.
... 415 cssmatrix api, reference a cssmatrix represents a homogeneous 4x4 matrix to which 2d or 3d transforms can be applied.
...it contains the following read-only attributes: 531 transformations canvas, graphics, guide, html, html5, intermediate, web before we look at the transformation methods, let's look at two other methods which are indispensable once you start generating ever more complex drawings.
...And 43 more matches

WebGL model view projection - Web APIs
the model, view, and projection matrices individual transformations of points and polygons in space in webgl are handled by the basic transformation matrices like translation, scale, and rotation.
... clip space in a webgl program, data is typically uploaded to the gpu with its own coordinate system and then the vertex shader transforms those points into a special coordinate system known as clip space.
...normally model data is used that is in some arbitrary coordinate system, and is then transformed using a matrix, converting the model coordinates into the clip space coordinate system.
...And 20 more matches

Viewpoints and viewers: Simulating cameras in WebXR - Web APIs
since you're actually moving everything except the camera, take the inverse of the transform matrix to get an inverse transform matrix.
... this is why the xrrigidtransform object used by webxr to represent transforms includes an inverse property.
... the inverse property is another xrrigidtransform object which is the inverse of the parent transform.
...And 16 more matches

Matrix math for the web - Web APIs
matrices can be used to represent transformations of objects in space, and are used for performing many key types of computation when constructing images and visualizing data on the web.
... this article explores how to create matrices and how to use them with css transforms and the matrix3d transform type.
... transformation matrices there are many types of matrices, but the ones we are interested in are the 3d transformation matrices.
...And 14 more matches

Inputs and input sources - Web APIs
the returned xrpose's transform is the transform corresponding to the target ray.
... thus, for an input controller primaryinput: let targetraypose = frame.session.getpose(primaryinput.targetrayspace, viewerrefspace); let targetrayorigin = targetraypose.transform.position; let targetrayvector = targetraypose.transform.orientation; with this, you now have the point from which the targeting ray is emitted (targetrayorigin) and the direction in which it's pointing (targetrayvector), given in the viewer's reference space (viewerrefspace).
... this means that if you use a 3d model to represent your controller, your player's avatar's hands, or anything else representative of the controller's position in space, the gripspace can be used as the transform matrix that correctly positions and orients the object's model for rendering.
...And 13 more matches

Creating a Microsummary - Archive of obsolete content
we'll build the xslt transform sheet that converts that page into its microsummary, learn how to specify that the generator applies to that page, and find out how to make the generator available for download and installation.
... in each step of revising the transform sheet and other code in this tutorial, new material added will be shown in boldface so you can follow along more easily.
...since our generator will be creating microsummaries displaying the firefox download count, let's give it the name "firefox download count": <?xml version="1.0" encoding="utf-8"?> <generator xmlns="http://www.mozilla.org/microsummaries/0.1" name="firefox download count"> </generator> adding an xslt transform sheet generators must include an xslt transform sheet (also known as an xslt stylesheet) which transforms the page content into its microsummary.
...And 11 more matches

CSS property compatibility table for form controls - Learn web development
text-overflow partial partial text-shadow partial partial text-transform yes yes border and background background partial[1] yes webkit browsers (mostly on mac osx and ios) use the native look & feel for the search fields.
... letter-spacing yes yes text-align no no text-decoration partial yes text-indent yes yes text-overflow no no text-shadow partial partial text-transform yes yes border and background background yes yes border-radius yes[1] yes[1] on opera the border-radius property is applied only if an explicit border is set.
... letter-spacing yes yes text-align yes yes text-decoration partial partial text-indent yes yes text-overflow no no text-shadow partial partial text-transform n.a.
...And 10 more matches

Using the CSS Typed Object Model - Web APIs
a transform returns a csstransformvalue.
... to two cssunitvalues or csskeywordvalues, or one of each: let position = new csspositionvalue( new csskeywordvalue("center"), new cssunitvalue(10, "px")); cssstylevalue the cssstylevalue interface of the the css typed object model api is the base class of all css values accessible through the typed om api, including cssimagevalue, csskeywordvalue, cssnumericvalue, csspositionvalue, csstransformvalue, and cssunparsedvalue.
... let's examine a css example with several custom properties, transforms, calc()s, and other features.
...And 10 more matches

Geometry and reference spaces in WebXR - Web APIs
everything you draw must have its coordinates mapped to fit into this space, either explicitly within your code, or by using a transform to adjust the coordinates of all vertices.
... the webgl coordinates and lengths are transformed automatically at render time to the size of the viewport in which the scene is being rendered.
... geometry operations with matrices we offer a guide to matrix mathematics as it pertains to 3d geometry, including how matrices are used for the three primary transforms that need to be performed when rendering 3d scenes: translation is the use of a matrix to shift the position of a point through the virtual space.
...And 10 more matches

Web audio spatialization basics - Web APIs
first, we'll get references to the elements we want to move, then we'll store references to the values we'll change when we set up css transforms to actually do the movement.
... finally, we'll set some bounds so our boombox doesn't move too far in any direction: const movecontrols = document.queryselector('#move-controls').queryselectorall('button'); const boombox = document.queryselector('.boombox-body'); // the values for our css transforms let transform = { xaxis: 0, yaxis: 0, zaxis: 0.8, rotatex: 0, rotatey: 0 } // set our bounds const topbound = -posy; const bottombound = posy; const rightbound = posx; const leftbound = -posx; const innerbound = 0.1; const outerbound = 1.5; let's create a function that takes the direction we want to move as a parameter, and both modifies the css transform and updates the position and orientation values of our panner node properties to change the sound as appropriate.
... function moveboombox(direction) { switch (direction) { case 'left': if (transform.xaxis > leftbound) { transform.xaxis -= 5; panner.positionx.value -= 0.1; } break; case 'up': if (transform.yaxis > topbound) { transform.yaxis -= 5; panner.positiony.value -= 0.3; } break; case 'right': if (transform.xaxis < rightbound) { transform.xaxis += 5; panner.positionx.value += 0.1; } break; case 'dow...
...And 10 more matches

SVG and CSS - SVG: Scalable Vector Graphics
ointer over the flower.</text> <g id="flower"> <circle id="overlay" cx="0" cy="0" r="200" stroke="none" fill="url(#fade)"/> <g id="outer-petals"> <g class="quadrant"> <g class="segment"> <path class="segment-fill" d="m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a40,40 0 0,0 -62,10"/> </g> <g class="segment" transform="rotate(18)"> <path class="segment-fill" d="m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a40,40 0 0,0 -62,10"/> </g> <g class="segment" transform="rotate(36)"> <path class="segment-fill" d="m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a40,40 0 0,0 -62,10"/> </g> <g cla...
...ss="segment" transform="rotate(54)"> <path class="segment-fill" d="m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a40,40 0 0,0 -62,10"/> </g> <g class="segment" transform="rotate(72)"> <path class="segment-fill" d="m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a40,40 0 0,0 -62,10"/> </g> </g> <g class="quadrant"> <g class="segment" transform="rotate(90)"> <path class="segment-fill" d="m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a40,40 0 0,0 -62,10"/> </g> <g class="segment" transform="rotate(108)"> <path class="segment-fill" d="m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path class="...
...segment-edge" d="m0,-200 a40,40 0 0,0 -62,10"/> </g> <g class="segment" transform="rotate(126)"> <path class="segment-fill" d="m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a40,40 0 0,0 -62,10"/> </g> <g class="segment" transform="rotate(144)"> <path class="segment-fill" d="m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a40,40 0 0,0 -62,10"/> </g> <g class="segment" transform="rotate(162)"> <path class="segment-fill" d="m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a40,40 0 0,0 -62,10"/> </g> </g> <g class="quadrant"> <g class="segment" transform="rotate(180)"> <path class...
...And 10 more matches

Fundamental text and font styling - Learn web development
but it was a rare occasion such as this that he did.</p> html { font-size: 10px; } h1 { font-size: 5rem; } p { font-size: 1.5rem; color: red; font-family: helvetica, arial, sans-serif; } font style, font weight, text transform, and text decoration css provides four common properties to alter the visual weight/emphasis of text: font-style: used to turn italic text on and off.
... text-transform: allows you to set your font to be transformed.
... values include: none: prevents any transformation.
...And 9 more matches

CanvasRenderingContext2D - Web APIs
transformations objects in the canvasrenderingcontext2d rendering context have a current transformation matrix and methods to manipulate it.
... the transformation matrix is applied when creating the current default path, painting text, shapes and path2d objects.
... canvasrenderingcontext2d.currenttransform current transformation matrix (svgmatrix object).
...And 9 more matches

XRView - Web APIs
projectionmatrix read only the projection matrix that will transform the scene to appear correctly given the point-of-view indicated by eye.
... transform read only an xrrigidtransform which describes the current position and orientation of the viewpoint in relation to the xrreferencespace specified when getviewerpose() was called on the xrframe being rendered.
...the transform property describes the position and orientation of the eye or camera represented by the xrview, given in that reference space.
...And 9 more matches

Using CSS transitions - CSS: Cascading Style Sheets
transition-duration: 0.5s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position:absolute; -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; -webkit-transition-duration: 0.5s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform -webkit-transform color; transition-duration: 0.5s; transition-timing-function: ease-in-out; } .box1{ transform: rotate(270deg); -webkit-transform: rotate(270deg); width: 50px; ...
... height: 50px; background-color: blue; color: yellow; font-size: 18px; left: 150px; top: 25px; position: absolute; -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; -webkit-transition-duration: 0.5s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform -webkit-transformv color; transition-duration: 0.5s; transition-timing-function: ease-in-out; } function updatetransition() { var el = document.queryselector("div.box"); if (el) { el.classname = "box1"; } else { el = document.queryselector("div.box1"); el.classname = "box"; } return el; } var intervalid = window.setinterval(updatetransit...
...ion, 7000); transition-duration: 1s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position: absolute; -webkit-transition-property: width height background-color font-size left top -webkit-transform color; -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform color; transition-duration: 1s; transition-timing-function: ease-in-out; } .box1{ transform: rotate(270deg); -webkit-transform: rotate(270deg); width: 50px; height: 50px; background-color: blue; ...
...And 9 more matches

Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
lude: html 4.01, xhtml 1.0 and xhtml 1.1 cascade style sheets (css): css level 1, css level 2.1 and parts of css level 3 document object model (dom): dom level 1, dom level 2 and parts of dom level 3 mathematical markup language: mathml version 2.0 extensible markup language (xml): xml 1.0, namespaces in xml, associating style sheets with xml documents 1.0, fragment identifier for xml xsl transformations: xslt 1.0 xml path language: xpath 1.0 resource description framework: rdf simple object access protocol: soap 1.1 ecma-262, revision 3 (javascript 1.5): ecma-262 general cross-browser coding tips even though web standards do exist, different browsers behave differently (in fact, the same browser may behave differently depending on the platform).
... xslt differences mozilla supports xsl transformations (xslt) 1.0.
... it also allows javascript to perform xslt transformations and allows running xpath on a document.
...And 8 more matches

Introducing a complete toolchain - Learn web development
we'll go all the way from setting up a sensible development environment and putting transformation tools in place to actually deploying your app on netlify.
... in this article we'll introduce the case study, set up our development environment, and set up our code transformation tools.
... transformation: tooling that allows us to use the latest features of a language (e.g.
...And 8 more matches

nsIXSLTProcessor
content/xslt/public/nsixsltprocessor.idlscriptable xslt processor inherits from: nsisupports last changed in gecko 1.7 implemented by: @mozilla.org/document-transformer;1?type=xslt.
... to create an instance, use: var xsltprocessor = components.classes["@mozilla.org/document-transformer;1?type=xslt"] .createinstance(components.interfaces.nsixsltprocessor); method overview void clearparameters(); nsivariant getparameter(in domstring namespaceuri, in domstring localname); void importstylesheet(in nsidomnode style); void removeparameter(in domstring namespaceuri, in domstring localname); void reset(); void setparameter(in domstring namespaceuri, in domstring localname, in nsivariant value); nsidomdocument transformtodocument(in nsidomnode source); nsidomdocumentfragment transformtofragment(in nsidomnode source, in nsidomdocument output); methods clearparameters() removes all set parameters from this nsixsltprocessor.
...importstylesheet() imports the specified stylesheet into this xsltprocessor for transformations.
...And 8 more matches

Movement, orientation, and motion: A WebXR example - Web APIs
suffice it to say that the vertex shader computes the position of each vertex given the initial positions of each vertex and the transforms that need to be applied to convert them to simulate the viewer's current position and orientation.
...r(xrsession, gl) }); if (session_type == "immersive-vr") { refspacetype = "local"; } else { refspacetype = "viewer"; } mat4.fromtranslation(cubematrix, viewerstartposition); vec3.copy(cubeorientation, viewerstartorientation); xrsession.requestreferencespace(refspacetype) .then((refspace) => { xrreferencespace = refspace.getoffsetreferencespace( new xrrigidtransform(viewerstartposition, cubeorientation)); animationframerequestid = xrsession.requestanimationframe(drawframe); }); return xrsession; } after storing the newly-created xrsession object into xrsession, the label of the button is set to "exit webxr" to indicate its new function after starting the scene, and a handler is installed for the end event, so we get notified when the xrsession ends...
... the glmatrix library's fromtranslation() function for 4x4 matrices is used to convert the viewer's start position as given in the viewerstartposition constant into a transform matrix.
...And 8 more matches

Connecting to Remote Content - Archive of obsolete content
using xslt xslt (extensible stylesheet language transformations) is another tool used to manipulate xml documents and transform them into other forms of text output, such as html, xul, and so on.
... we can not cover all transformations to various output formats, so we'll just look into converting an xml document to xul.
...this template will transform the xml you receive (in our case, the example xml document above) and convert it into xul.
...And 7 more matches

WebGL2RenderingContext - Web APIs
transform feedback webgl2renderingcontext.createtransformfeedback() creates and initializes webgltransformfeedback objects.
... webgl2renderingcontext.deletetransformfeedback() deletes a given webgltransformfeedback object.
... webgl2renderingcontext.istransformfeedback() returns true if the passed object is a valid webgltransformfeedback object.
...And 7 more matches

Spaces and reference spaces: Spatial tracking in WebXR - Web APIs
the first is described above: applying a reference space to an offset (or vice-versa, since the result is the same) to determine the transform matrix that represents the resulting location in the space's coordinate system.
... in webxr, a pose is represented by an xrpose object, whose transform property is an xrrigidtransform defining the transform matrix that, applied to any coordinate, vector, or matrix in the original space, converts it to the target space.
...you can then apply controlpose's transform to the vertices in the object model representing the controller to calculate the webgl coordinates to use when rendering the controller's representation to the framebuffer.
...And 7 more matches

matrix3d() - CSS: Cascading Style Sheets
the matrix3d() css function defines a 3d transformation as a 4x4 homogeneous matrix.
... its result is a <transform-function> data type.
... matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4) values a1 b1 c1 d1 a2 b2 c2 d2 a3 b3 c3 d3 are <number>s describing the linear transformation.
...And 7 more matches

translateZ() - CSS: Cascading Style Sheets
its result is a <transform-function> data type.
... this transformation is defined by a <length> which specifies how far inward or outward the element or elements move.
... in the above interactive examples, perspective: 550px; (to create a 3d space) and transform-style: preserve-3d; (so the children, the 6 sides of the cube, are also positioned in the 3d space), have been set on the cube.
...And 7 more matches

SVG documentation index - SVG: Scalable Vector Graphics
97 gradienttransform svg, svg attribute the gradienttransform attribute contains the definition of an optional additional transformation from the gradient coordinate system onto the target coordinate system (i.e., userspaceonuse or objectboundingbox).
...this additional transformation matrix is post-multiplied to (i.e., inserted to the right of) any previously defined transformations, including the implicit transformation necessary to convert from object bounding box units to user space.
... 160 patterntransform svg, svg attribute the patterntransform attribute defines a list of transform definitions that are applied to a pattern tile.
...And 7 more matches

SVGMatrix - Web APIs
svgmatrix.translate() post-multiplies a translation transformation on the current matrix and returns the resulting matrix as svgmatrix.
... svgmatrix.scale() post-multiplies a uniform scale transformation on the current matrix and returns the resulting matrix as svgmatrix.
... svgmatrix.scalenonuniform() post-multiplies a non-uniform scale transformation on the current matrix and returns the resulting matrix as svgmatrix.
...And 6 more matches

perspective() - CSS: Cascading Style Sheets
the perspective() css function defines a transformation that sets the distance between the user and the z=0 plane, the perspective from which the viewer would be if the 2-dimensional interface were 3-dimensional.
... its result is a <transform-function> data type.
... the perspective() transform function is part of the transform value applied on the element being transformed.
...And 6 more matches

<metadata> - SVG: Scalable Vector Graphics
used by hub symbol --> <symbol id="hubplug"> <desc>a 10baset/100basetx socket</desc> <path d="m0,10 h5 v-9 h12 v9 h5 v16 h-22 z"/> </symbol> <!-- hub symbol --> <symbol id="hub"> <desc>a typical 10baset/100basetx network hub</desc> <text x="0" y="15">hub</text> <g transform="translate(0 20)"> <rect width="253" height="84"/> <rect width="229" height="44" x="12" y="10"/> <circle fill="red" cx="227" cy="71" r="7" /> <!-- five groups each using the defined socket --> <g id="sock1et" transform="translate(25 20)"> <title>socket 1</title> <use xlink:href="#hubplug"/> </g> <g id="socket2" transform=...
..."translate(70 20)"> <title>socket 2</title> <use xlink:href="#hubplug"/> </g> <g id="socket3" transform="translate(115 20)"> <title>socket 3</title> <use xlink:href="#hubplug"/> </g> <g id="socket4" transform="translate(160 20)"> <title>socket 4</title> <use xlink:href="#hubplug"/> </g> <g id="socket5" transform="translate(205 20)"> <title>socket 5</title> <use xlink:href="#hubplug"/> </g> </g> </symbol> <!-- computer symbol --> <symbol id="computer"> <desc>a common desktop pc</desc> <g id="monitorstand" transform="translate(40 121)"> <title>monitor stand</title> <desc>one of those cool swivelling monitor stands that s...
...or</desc> <path d="m0,0 s 10 10 40 12"/> <path d="m80,0 s 70 10 40 12"/> <path d="m0,20 l 10 10 s 40 12 70 10 l 80 20z"/> </g> <g id="monitor"> <title>monitor</title> <desc>a very fancy monitor</desc> <rect width="160" height="120"/> <rect fill="lightgrey" width="138" height="95" x="11" y="12"/> </g> <g id="processor" transform="translate(0 142)"> <title>the computer</title> <desc>a desktop computer - broad flat box style</desc> <rect width="160" height="60"/> <g id="discdrive" transform="translate(70 8)"> <title>disc drive</title> <desc>a built-in disc drive</desc> <rect width="58" height="3" x="12" y="8"/> <rect width="8" height="2" x="12" y="15"/...
...And 6 more matches

Work with animations - Firefox Developer Tools
for example, try clicking on the bar for img#icon's animation: this is telling us that two properties were modified: filter and transform.
...filter was given a value at 250ms and transform at 500ms.
... if you hover over a dot, you'll see the value assigned to that property at that point in the timeline: this is essentially a visual representation of the animation's keyframes: var iconkeyframeset = [ { transform: 'scale(1)', filter: 'grayscale(100%)' }, { filter: 'grayscale(100%)', offset: 0.333 }, { transform: 'scale(1.5)', offset: 0.666 }, { transform: 'scale(1.5)', filter: 'grayscale(0%)' } ]; application to the example applying all this to our example, we can see that: the animation involved two elements, span#note and img#icon.
...And 5 more matches

SVGSVGElement - Web APIs
the meaning depends on the situation: if the initial view was a "standard" view, then: the values for viewbox, preserveaspectratio and zoomandpan within currentview will match the values for the corresponding dom attributes that are on svgsvgelement directly the values for transform and viewtarget within currentview will be null if the initial view was a link into a <view> element, then: the values for viewbox, preserveaspectratio and zoomandpan within currentview will correspond to the corresponding attributes for the given <view> element the values for transform and viewtarget within currentview will be null if the initial view was a link into another element ...
...(i.e., other than a <view>), then: the values for viewbox, preserveaspectratio and zoomandpan within currentview will match the values for the corresponding dom attributes that are on svgsvgelement directly for the closest ancestor <svg> element the values for transform within currentview will be null the viewtarget within currentview will represent the target of the link if the initial view was a link into the svg document fragment using an svg view specification fragment identifier (i.e., #svgview(…)), then: the values for viewbox, preserveaspectratio, zoomandpan, transform and viewtarget within currentview will correspond to the values from the svg view specification fragment identifier svgsvgelement.currentscale on an outermost <svg> element, this float attribute indica...
...if "magnification" is enabled (i.e., zoomandpan="magnify"), then the effect is as if an extra transformation were placed at the outermost level on the svg document fragment (i.e., outside the outermost <svg> element).
...And 5 more matches

translate() - CSS: Cascading Style Sheets
its result is a <transform-function> data type.
... this transformation is characterized by a two-dimensional vector.
... syntax /* single <length-percentage> values */ transform: translate(200px); transform: translate(50%); /* double <length-percentage> values */ transform: translate(100px, 200px); transform: translate(100px, 50%); transform: translate(30%, 200px); transform: translate(30%, 50%); values single <length-percentage> values this value is a <length> or <percentage> representing the abscissa (horizontal, x-coordinate) of the translating vector.
...And 5 more matches

transition-duration - CSS: Cascading Style Sheets
crete formal syntax <time># examples transition-duration: 0.5s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position:absolute; -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; -webkit-transition-duration:0.5s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform -webkit-transform color; transition-duration:0.5s; transition-timing-function: ease-in-out; } .box1{ transform: rotate(270deg); -webkit-transform: rotate(270deg); width: 50px; ...
... height: 50px; background-color: blue; color: yellow; font-size: 18px; left: 150px; top:25px; position:absolute; -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; -webkit-transition-duration:0.5s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform -webkit-transformv color; transition-duration:0.5s; transition-timing-function: ease-in-out; } function updatetransition() { var el = document.queryselector("div.box"); if (el) { el.classname = "box1"; } else { el = document.queryselector("div.box1"); el.classname = "box"; } return el; } var intervalid = window.setinterval(updatetransition, 70...
...00); transition-duration: 1s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position:absolute; -webkit-transition-property: width height background-color font-size left top -webkit-transform color; -webkit-transition-duration:1s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform color; transition-duration:1s; transition-timing-function: ease-in-out; } .box1{ transform: rotate(270deg); -webkit-transform: rotate(270deg); width: 50px; height: 50px; background-color: blue; color: yellow; ...
...And 5 more matches

gradientUnits - SVG: Scalable Vector Graphics
dingbox animatable yes userspaceonuse this value indicates that the attributes represent values in the coordinate system that results from taking the current user coordinate system in place at the time when the gradient element is referenced (i.e., the user coordinate system for the element referencing the gradient element via a fill or stroke property) and then applying the transform specified by attribute gradienttransform.
... objectboundingbox this value indicates that the user coordinate system for the attributes is established using the bounding box of the element to which the gradient is applied and then applying the transform specified by attribute gradienttransform.
... with this value and gradienttransform being the identity matrix, the normal of the linear gradient is perpendicular to the gradient vector in object bounding box space (i.e., the abstract coordinate system where (0,0) is at the top/left of the object bounding box and (1,1) is at the bottom/right of the object bounding box).
...And 5 more matches

Microsummary XML grammar reference - Archive of obsolete content
example the microsummary generator created in the creating a microsummary tutorial: <?xml version="1.0" encoding="utf-8"?> <generator xmlns="http://www.mozilla.org/microsummaries/0.1" name="firefox download count"> <template> <transform xmlns="http://www.w3.org/1999/xsl/transform" version="1.0"> <output method="text"/> <template match="/"> <value-of select="id('download-count')"/> <text> fx downloads</text> </template> </transform> </template> <pages> <include>http://(www\.)?spreadfirefox\.com/(index\.php)?</include> </pages> </generator> namespace the namespace uri for microsumma...
...ry generator xml documents is: http://www.mozilla.org/microsummaries/0.1 all elements in a microsummary generator document should be in this namespace except the descendants of the <template> element, which should be in the xslt namespace: http://www.w3.org/1999/xsl/transform the <generator> element the <generator> element is the root tag for all microsummary generators, and should contain the remainder of the xml code describing the generator.
... child elements: <template> (required) defines how to transform pages into their microsummaries.
...And 4 more matches

Client-side tooling overview - Learn web development
transformation — tools that transform code in some way, e.g.
...it can even handle some code transformation duties for you.
... transformation this stage of your web app lifecycle typically allows you to code in either "future code" (such as the latest css or javascript features that might not have native support in browsers yet) or code using another language entirely, such as typescript.
...And 4 more matches

Applying styles and colors - Web APIs
while slightly painful when initially working with scalable 2d graphics, paying attention to the pixel grid and the position of paths ensures that your drawings will look correct regardless of scaling or any other transformations involved.
...note that the maximum miter length is the product of the line width measured in the current coordinate system, by the value of this miterlimit property (whose default value is 10.0 in the html <canvas>), so the miterlimit can be set independently from the current display scale or any affine transforms of paths: it only influences the effectively rendered shape of line edges.
...this value isn't affected by the transformation matrix.
...And 4 more matches

DOMMatrixReadOnly.scale() - Web APIs
the scale() method of the dommatrixreadonly interface creates a new matrix being the result of the original matrix with a scale transform applied.
... originx optional an x-coordinate for the origin of the transformation.
... originy optional a y-coordinate for the origin of the transformation.
...And 4 more matches

ReadableStream.pipeThrough() - Web APIs
the pipethrough() method of the readablestream interface provides a chainable way of piping the current stream through a transform stream or any other writable/readable pair.
... syntax var transformedstream = readablestream.pipethrough(transformstream[, options]); parameters transformstream a transformstream (or an object with the structure {writable, readable}) consisting of a readable stream and a writable stream working together to transform some data from one form to another.
... data writen to the writable stream can be read in some transformed state by the readable stream.
...And 4 more matches

XRReferenceSpace.getOffsetReferenceSpace() - Web APIs
then, when drawing the scene, you can use the offset reference space to not only position objects relative to one another, but to apply the needed transforms to render objects properly based upon the viewer's position.
... syntax offsetreferencespace = xrreferencespace.getoffsetreferencespace(originoffset); parameters originoffset an xrrigidtransform specifying the offset to the origin of the new reference space.
... xrsession.requestreferencespace("local") .then((refspace) => { xrreferencespace = refspace; xrreferencespace = xrreferencespace.getoffsetreferencespace( new xrrigidtransform(startposition, {x:0, y:0, z:1.0, w: 1.0})); xrsession.requestanimationframe(drawframe); }); in this code, we obtain a local reference space, then use getoffsetreferencespace() to create a new space whose origin is adjusted to a position given by startposition and whose orientation is looking directly along the z azis.
...And 4 more matches

Box-shadow generator - CSS: Cascading Style Sheets
"></div> <div class="ui-slider" data-topic="left" data-min="-300" data-max="700" data-step="1"> </div> <div class="ui-slider-btn-set" data-topic="left" data-type="add"></div> <div class="ui-slider-input" data-topic="left" data-unit="px"></div> </div> <div id="transform_rotate" class="slidergroup"> <div class="ui-slider-name"> rotate </div> <div class="ui-slider-btn-set" data-topic="rotate" data-type="sub"></div> <div class="ui-slider" data-topic="rotate" data-min="-360" data-max="360" data-step="1" data-value="0"> </div> ...
...s="output" data-topic="element" data-name="element" data-prop="width height background-color position=[relative] box-shadow"> </div> <div class="output" data-topic="before" data-name="element:before" data-prop="content=[&quot;&quot;] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform"> </div> <div class="output" data-topic="after" data-name="element:after" data-prop="content=[&quot;&quot;] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform"> </div> </div> </div> ...
...; -moz-user-select: none; user-select: none; } .slidergroup * { float: left; height: 100%; line-height: 100%; } /* slider */ .ui-slider { height: 10px; width: 200px; margin: 4px 10px; display: block; border: 1px solid #999; border-radius: 3px; background: #eee; } .ui-slider:hover { cursor: pointer; } .ui-slider-name { width: 90px; padding: 0 10px 0 0; text-align: right; text-transform: lowercase; } .ui-slider-pointer { width: 13px; height: 13px; background-color: #eee; border: 1px solid #2c9fc9; border-radius: 3px; position: relative; top: -3px; left: 0%; } .ui-slider-btn-set { width: 25px; background-color: #2c9fc9; border-radius: 3px; color: #fff; font-weight: bold; text-align: center; } .ui-slider-btn-set:hover { background-color: #379b4a; cursor: pointer...
...And 4 more matches

scaleZ() - CSS: Cascading Style Sheets
the scalez() css function defines a transformation that resizes an element along the z-axis.
... its result is a <transform-function> data type.
... this scaling transformation modifies the z-coordinate of each element point by a constant factor, except when the scale factor is 1, in which case the function is the identity transform.
...And 4 more matches

SVG 2 support in Mozilla - SVG: Scalable Vector Graphics
y instead of svgmatrix implementation status unknown domrect or domrectreadonly instead of svgrect implementation status unknown dompoint or dompointreadonly instead of svgpoint implementation status unknown members of svgstylable and svglangspace available in svgelement implementation status unknown svggraphicselement instead of svglocatable and svgtransformable implementation status unknown svggeometryelement with svggeometryelement.ispointinfill() and svggeometryelement.ispointinstroke() methods partially implemented (bug 1239100).
...ber> and <integer> implementation status unknown form feed (u+000c) in whitespace implementation status unknown svgelement.xmlbase, svgelement.xmllang and svgelement.xmlspace removed implementation status unknown svgviewspec removed implementation status unknown svgelement.style removed implementation status unknown svggraphicselement.gettransformtoelement() removed not removed yet svggraphicselement.getctm() on the outermost element implementation status unknown animval attribute alias of baseval implementation status unknown dataset attribute for svgelement implementation status unknown moved pathlength attribute and gettotallength() and getpointatlength() methods from svgpathelement to svg...
...endredrawall() deprecated turned into no-ops (bug 734079) externalresourcesrequired attribute removed implementation status unknown auto value for width and height in <image> implementation status unknown referencing entire document with <use> implementation status unknown lang attribute on <desc> and <title> implemented (bug 721920) css transforms on outermost <svg> not affecting svgsvgelement.currentscale or svgsvgelement.currenttranslate implementation status unknown rootelement attribute deprecated implementation status unknown svgelementinstance and svgelementinstancelist and corresponding attributes on svguseelement removed implementation status unknown <use> event flow following shadow dom spec.
...And 4 more matches

Index - Archive of obsolete content
380 building transformiix standalone needshelp, needsrewrite, xslt no summary!
... 670 transforming xml with xslt:mozilla xslt no summary!
... 671 transforming xml with xslt:the netscape xslt no summary!
...And 3 more matches

Animating CSS properties - Firefox Developer Tools
transform opacity the css triggers website shows how much of the waterfall is triggered for each css property, with information for most css properties by browser engine.
... an example: margin versus transform in this section we'll see how the waterfall can highlight the difference between animating using margin and animating using transform.
...it looks like this: it has two controls: a button to start/stop the animation, and a radio group to choose to animate using margin, or to animate using transform.
...And 3 more matches

Using the Web Animations API - Web APIs
here’s the simplified css that controls alice’s animation: #alice { animation: alicetumbling infinite 3s linear; } @keyframes alicetumbling { 0% { color: #000; transform: rotate(0) translate3d(-50%, -50%, 0); } 30% { color: #431236; } 100% { color: #000; transform: rotate(360deg) translate3d(-50%, -50%, 0); } } this changes alice’s color and her transform’s rotation over 3 seconds at a constant (linear) rate and loops infinitely.
... representing keyframes the first thing we need is to create a keyframe object corresponding to our css @keyframes block: var alicetumbling = [ { transform: 'rotate(0) translate3d(-50%, -50%, 0)', color: '#000' }, { color: '#431236', offset: 0.3}, { transform: 'rotate(360deg) translate3d(-50%, -50%, 0)', color: '#000' } ]; here we’re using an array containing multiple objects.
...instead of making objects for keyframes and timing properties, we could just pass their values in directly, like so: document.getelementbyid("alice").animate( [ { transform: 'rotate(0) translate3d(-50%, -50%, 0)', color: '#000' }, { color: '#431236', offset: 0.3}, { transform: 'rotate(360deg) translate3d(-50%, -50%, 0)', color: '#000' } ], { duration: 3000, iterations: infinity } ); what’s more, if we only wanted to specify the duration of the animation and not its iterations (by default, animations iterate once), we could pass in the millisec...
...And 3 more matches

XSLTProcessor - Web APIs
an xsltprocessor applies an xslt stylesheet transformation to an xml document to produce a new xml document as output.
... it has methods to load the xslt stylesheet, to manipulate <xsl:param> parameter values, and to apply the transformation to documents.
...if the given node is a document node, you can pass in a full xsl transform or a literal result element transform; otherwise, it must be an <xsl:stylesheet> or <xsl:transform> element.
...And 3 more matches

@supports - CSS: Cascading Style Sheets
the following example returns true if the browser's transform-origin property considers 5% 5% valid: @supports (transform-origin: 5% 5%) {} function syntax the second basic supports condition is a supports function, the syntax for these is supported by all browsers, but the functions themselves are still being standardized.
...the following example returns true if the browser's transform-origin property doesn't consider 10em 10em 10em valid: @supports not (transform-origin: 10em 10em 10em) {} as with any operator, the not operator can be applied to a declaration of any complexity.
... the following examples are both valid: @supports not (not (transform-origin: 2px)) {} @supports (display: grid) and (not (display: inline-grid)) {} note: there is no need to enclose the not operator between two parentheses at the top level.
...And 3 more matches

perspective - CSS: Cascading Style Sheets
syntax /* keyword value */ perspective: none; /* <length> values */ perspective: 20px; perspective: 3.5em; /* global values */ perspective: inherit; perspective: initial; perspective: unset; values none indicates that no perspective transform is to be applied.
...it is used to apply a perspective transform to the element and its content.
... if the value is 0 or a negative number, no perspective transform is applied.
...And 3 more matches

rotate() - CSS: Cascading Style Sheets
the rotate() css function defines a transformation that rotates an element around a fixed point on the 2d plane, without deforming it.
... its result is a <transform-function> data type.
... the fixed point that the element rotates around — mentioned above — is also known as the transform origin.
...And 3 more matches

rotate3d() - CSS: Cascading Style Sheets
the rotate3d() css function defines a transformation that rotates an element around a fixed axis in 3d space, without deforming it.
... its result is a <transform-function> data type.
...the axis of rotation is defined by an [x, y, z] vector and pass by the origin (as defined by the transform-origin property).
...And 3 more matches

scale() - CSS: Cascading Style Sheets
the scale() css function defines a transformation that resizes an element on the 2d plane.
...its result is a <transform-function> data type.
... this scaling transformation is characterized by a two-dimensional vector.
...And 3 more matches

scale3d() - CSS: Cascading Style Sheets
the scale3d() css function defines a transformation that resizes an element in 3d space.
...its result is a <transform-function> data type.
... this scaling transformation is characterized by a three-dimensional vector.
...And 3 more matches

scaleY() - CSS: Cascading Style Sheets
the scaley() css function defines a transformation that resizes an element along the y-axis (vertically).
... its result is a <transform-function> data type.
... it modifies the ordinate of each element point by a constant factor, except when the scale factor is 1, in which case the function is the identity transform.
...And 3 more matches

translate3d() - CSS: Cascading Style Sheets
its result is a <transform-function> data type.
... this transformation is characterized by a three-dimensional vector.
...it can't be a <percentage> value; in that case the property containing the transform is considered invalid.
...And 3 more matches

<input type="range"> - HTML: Hypertext Markup Language
in the meantime, we can make the range vertical by rotating it using using css transforms, or, by targeting each browser engine with their own method, which includes setting the appearance to slider-vertical, by using a non-standard orient attribute in firefox, or by changing the text direction for internet explorer and edge.
... transform: rotate(-90deg) you can, however, create a vertical range control by drawing a horizontal range control on its side.
... the easiest way is to use css: by applying a transform to rotate the element, you can make it vertical.
...And 3 more matches

Animation performance and frame rate - Web Performance
transform opacity the css triggers website shows how much of the waterfall is triggered for each css property, with information for most css properties by browser engine.
... an example: margin versus transform in this section we'll see how the waterfall can highlight the difference between animating using margin and animating using transform.
...it looks like this: it has two controls: a button to start/stop the animation, and a radio group to choose to animate using margin, or to animate using transform.
...And 3 more matches

vector-effect - SVG: Scalable Vector Graphics
the resulting visual effect of this value is that the stroke width is not dependant on the transformations of the element (including non-uniform scaling and shear transformations) and zoom level.
...the scale of that user coordinate system does not change in spite of any transformation changes from a host coordinate space.
...the rotation and skew of that user coordinate system is suppressed in spite of any transformation changes from a host coordinate space.
...And 3 more matches

<feComposite> - SVG: Scalable Vector Graphics
" /> <path id="red100" d="m 0 0 l 0 100 l 100 0 z" fill="#ff00ff" /> <path id="blue50" d="m 0 125 l 100 125 l 100 225 z" fill="#00ffff" fill-opacity=".5" /> <path id="red50" d="m 0 125 l 0 225 l 100 125 z" fill="#ff00ff" fill-opacity=".5" /> <g id="twobluetriangles"> <use xlink:href="#blue100"/> <use xlink:href="#blue50"/> </g> <g id="bluetriangles"> <use transform="translate(275,25)" xlink:href="#twobluetriangles"/> <use transform="translate(400,25)" xlink:href="#twobluetriangles"/> <use transform="translate(525,25)" xlink:href="#twobluetriangles"/> <use transform="translate(650,25)" xlink:href="#twobluetriangles"/> <use transform="translate(775,25)" xlink:href="#twobluetriangles"/> <use transform="translate(900,25)" xlink:hre...
...rs that draw on top of an opaque white surface, thus obliterating the background.</desc> <g enable-background="new"> <text x="15" y="75">opacity 1.0</text> <text x="15" y="115" font-size="27">(with feflood)</text> <text x="15" y="200">opacity 0.5</text> <text x="15" y="240" font-size="27">(with feflood)</text> <use xlink:href="#bluetriangles"/> <g transform="translate(275,25)"> <use xlink:href="#red100" filter="url(#overflood)" /> <use xlink:href="#red50" filter="url(#overflood)" /> <text x="5" y="275">over</text> </g> <g transform="translate(400,25)"> <use xlink:href="#red100" filter="url(#inflood)" /> <use xlink:href="#red50" filter="url(#inflood)" /> <text x="35" y="275">in</text> ...
...</g> <g transform="translate(525,25)"> <use xlink:href="#red100" filter="url(#outflood)" /> <use xlink:href="#red50" filter="url(#outflood)" /> <text x="15" y="275">out</text> </g> <g transform="translate(650,25)"> <use xlink:href="#red100" filter="url(#atopflood)" /> <use xlink:href="#red50" filter="url(#atopflood)" /> <text x="10" y="275">atop</text> </g> <g transform="translate(775,25)"> <use xlink:href="#red100" filter="url(#xorflood)" /> <use xlink:href="#red50" filter="url(#xorflood)" /> <text x="15" y="275">xor</text> </g> <g transform="translate(900,25)"> <use xlink:href="#red100" filter="url(#arithmeticflood)" /> <use xlink:href="#red50" filter="url(#arithmeticf...
...And 3 more matches

CSS3 - Archive of obsolete content
web animations working draft css text module level 3 working draft extends: the css text-transform property with the value full-width.
... css transforms level 1 working draft adds: the support of bi-dimensional transforms to be applied to any element using the css transform and transform-origin properties.
... the supported transforms are: matrix(), translate(), translatex(), translatey(), scale(), scalex(), scaley(), rotate(), skewx(), and skewy().
...And 2 more matches

-ms-filter - Archive of obsolete content
code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/filter_8.htm -ms-filter: 'progid:dximagetransform.microsoft.motionblur(strength=50), progid:dximagetransform.microsoft.basicimage(mirror=1)'; the following example shows how to use an inline style sheet to set the filter on an image.
... code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/filter_h.htm <img style="filter:progid:dximagetransform.microsoft.motionblur(strength=50) progid:dximagetransform.microsoft.basicimage(mirror=1)" src="/workshop/samples/author/dhtml/graphics/cone.jpg" height="80px" width="80px" alt="cone"> the following example shows how to use scripting to set the filter on an image.
... filterfrom.filters.item(0).transition=12; imagefrom.style.visibility = "hidden"; filterto.style.visibility = ""; filterfrom.filters.item(0).play(14); } </script> </body> gradient progid:dximagetransform.microsoft.gradient( <properties> ) where <properties> = [ <enabled> | <endcolor> | <endcolorstr> | <gradienttype> | <startcolor> | <startcolorstr> ]# where <enabled> = 'enabled=' [ true | false ] <endcolor> = 'startcolor=' <color> <endcolorstr> = 'startcolorstr=' <color> <gradienttype> = 'gradienttype=' <integer> <startcolor> = 'startcolor=' <color> <startcolorstr> = 'startcolorstr=' <color> ...
...And 2 more matches

Explaining basic 3D theory - Game development
there are four stages to this processing: the first one involves arranging the objects in the world, and is called model transformation.
... then there's view transformation which takes care of positioning and setting the orientation of the camera in the 3d space.
... projection transformation (also called perspective transformation) then defines the camera settings.
...And 2 more matches

Index - MDN Web Docs Glossary: Definitions of Web-related terms
83 compile codingscripting, glossary compiling is the process of transforming a computer program written in a given language into an equivalent program of another language.
... 97 cryptographic hash function cryptography, glossary, security a cryptographic hash function, also sometimes called a digest function, is a cryptographic primitive transforming a message of arbitrary size into a message of fixed size, called a digest.
...the transformation performed by one of the keys can only be undone with the other key.
...And 2 more matches

CanvasRenderingContext2D.scale() - Web APIs
the canvasrenderingcontext2d.scale() method of the canvas 2d api adds a scaling transformation to the canvas units horizontally and/or vertically.
...a scaling transformation modifies this behavior.
...the transformation matrix scales it by 9x horizontally and by 3x vertically.
...And 2 more matches

EffectTiming.fill - Web APIs
var boxrotationkeyframes = [ { transform: "rotate(-90deg)" }, { transform: "rotate(90deg)" } ]; the boxrotationkeyframes object is an array of keyframes, each describing the state of the affected element at a point in the animation process.
...var rabbitdownkeyframes = new keyframeeffect( whiterabbit, [ { transform: 'translatey(0%)' }, { transform: 'translatey(100%)' } ], { duration: 3000, fill: 'forwards' } ); // set up the rabbit's animation to play on command by calling rabbitdownanimation.play() later var rabbitdownanimation = new animation(rabbitdownkeyframes, document.timeline); alternatives to fill modes fill modes are primarily provided as a means of representing the animation...
... rather than using fill modes to persist an animation, it is often simpler to set the final value of the animation effect directly in specified style: elem.animate({ transform: 'translatey(100px)' }, 200).finished.then(() => { elem.style.transform = 'translatey(100px)'; }); alternatively, it may be simpler still to set the final value in specified style before triggering the animation and then animate from the start value.
...And 2 more matches

Using bounded reference spaces - Web APIs
encespace(spacetype) .then(onrefspacecreated) .catch(() => { spacetype = "local-floor"; xrsession.requestreferencespace(spacetype) .then(onrefspacecreated) .catch(handleerror); }); } function onrefspacecreated(refspace) { xrsession.updaterenderstate({ baselayer: new xrwebgllayer(xrsession, gl) }); // now set up matrices, create a secondary reference space to // transform the viewer's pose, and so forth.
...if you wish to simulate a human's perspective on the scene, you probably want to move the viewpoint upward by a distance that approximates human eye level by transforming it by providing an appropriate transform matrix to the xrreferencespace method requestoffsetreferencespace().
... this would change the onrefspacecreated() method from the above snippet to: function onrefspacecreated(refspace) { xrsession.updaterenderstate({ baselayer: new xrwebgllayer(xrsession, gl) }); let startposition = vec3.fromvalues(0, 1.5, 0); const startorientation = vec3.fromvalues(0, 0, 1.0); xrreferencespace = xrreferencespace.getoffsetreferencespace( new xrrigidtransform(startposition, startorientation)); xrsession.requestanimationframe(ondrawframe); } in this code, executed after the reference space has been created, we create an xrrigidtransform representing the transform that will move the viewpoint upward by 1.5 meters.
...And 2 more matches

Generating HTML - Web APIs
generating html one common application of xslt in the browser is to transform xml into html on the client.
... the second example will transform the input document (example2.xml), which again contains information about an article, into an html document.
... figure 3 : xsl stylesheet with 2 namespaces (example2.xsl) xsl stylesheet (example2.xsl): <?xml version="1.0"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/xsl/transform" xmlns:myns="http://devedge.netscape.com/2002/de"> <xsl:output method="html"/> ...
...And 2 more matches

Web APIs
ionsensor renderingcontext report reportingobserver reportingobserveroptions request requestdestination resizeobserver resizeobserverentry response rsahashedimportparams rsahashedkeygenparams rsaoaepparams rsapssparams s svgaelement svgaltglyphdefelement svgaltglyphelement svgaltglyphitemelement svgangle svganimatecolorelement svganimateelement svganimatemotionelement svganimatetransformelement svganimatedangle svganimatedboolean svganimatedenumeration svganimatedinteger svganimatedlength svganimatedlengthlist svganimatednumber svganimatednumberlist svganimatedpoints svganimatedpreserveaspectratio svganimatedrect svganimatedstring svganimatedtransformlist svganimationelement svgcircleelement svgclippathelement svgcolorprofileelement svgcomponenttransferfunctionelement svgcursor...
...ement svgpreserveaspectratio svgradialgradientelement svgrect svgrectelement svgrenderingintent svgsvgelement svgscriptelement svgsetelement svgsolidcolorelement svgstopelement svgstringlist svgstylable svgstyleelement svgswitchelement svgsymbolelement svgtrefelement svgtspanelement svgtests svgtextcontentelement svgtextelement svgtextpathelement svgtextpositioningelement svgtitleelement svgtransform svgtransformlist svgtransformable svgurireference svgunittypes svguseelement svgvkernelement svgviewelement svgzoomandpan screen screenorientation scriptprocessornode scrolltooptions securitypolicyviolationevent selection sensor sensorerrorevent serviceworker serviceworkercontainer serviceworkerglobalscope serviceworkermessageevent serviceworkerregistration serviceworkerstate shadowro...
...estimate storageevent storagemanager storagequota stylepropertymap stylepropertymapreadonly stylesheet stylesheetlist submitevent subtlecrypto syncevent syncmanager t taskattributiontiming text textdecoder textencoder textmetrics textrange texttrack texttrackcue texttracklist timeevent timeranges touch touchevent touchlist trackdefault trackdefaultlist trackevent transferable transformstream transitionevent treewalker typeinfo u uievent ulongrange url urlsearchparams urlutilsreadonly usb usbalternateinterface usbconfiguration usbdevice usbendpoint usbintransferresult usbinterface usbisochronousintransferpacket usbisochronousintransferresult usbisochronousouttransferpacket usbisochronousouttransferresult usbouttransferresult usvstring userdatahandler use...
...And 2 more matches

backface-visibility - CSS: Cascading Style Sheets
though invisible in 2d, the back face can become visible when a transformation causes the element to be rotated in 3d space.
... (this property has no effect on 2d transforms, which have no perspective.) syntax /* keyword values */ backface-visibility: visible; backface-visibility: hidden; /* global values */ backface-visibility: inherit; backface-visibility: initial; backface-visibility: unset; the backface-visibility property is specified as one of the keywords listed below.
... formal definition initial valuevisibleapplies totransformable elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax visible | hidden examples cube with transparent and opaque faces this example shows a cube with transparent faces, and one with opaque faces.
...And 2 more matches

rotateX() - CSS: Cascading Style Sheets
the rotatex() css function defines a transformation that rotates an element around the abscissa (horizontal axis) without deforming it.
... its result is a <transform-function> data type.
... the axis of rotation passes through an origin, defined by the transform-origin css property.
...And 2 more matches

rotateY() - CSS: Cascading Style Sheets
the rotatey() css function defines a transformation that rotates an element around the ordinate (vertical axis) without deforming it.
... its result is a <transform-function> data type.
... the axis of rotation passes through an origin, defined by the transform-origin css property.
...And 2 more matches

rotateZ() - CSS: Cascading Style Sheets
the rotatez() css function defines a transformation that rotates an element around the z-axis without deforming it.
... its result is a <transform-function> data type.
... the axis of rotation passes through an origin, defined by the transform-origin css property.
...And 2 more matches

scaleX() - CSS: Cascading Style Sheets
the scalex() css function defines a transformation that resizes an element along the x-axis (horizontally).
... its result is a <transform-function> data type.
... it modifies the abscissa of each element point by a constant factor, except when the scale factor is 1, in which case the function is the identity transform.
...And 2 more matches

translateX() - CSS: Cascading Style Sheets
its result is a <transform-function> data type.
... syntax /* <length-percentage> values */ transform: translatex(200px); transform: translatex(50%); values <length-percentage> is a <length> or <percentage> representing the abscissa of the translating vector.
... a percentage value refers to the width of the reference box defined by the transform-box property.
...And 2 more matches

translateY() - CSS: Cascading Style Sheets
its result is a <transform-function> data type.
... syntax /* <length-percentage> values */ transform: translatey(200px); transform: translatey(50%); values <length-percentage> the value is a <length> or <percentage> representing the ordinate of the translating vector.
... a percentage value refers to the height of the reference box defined by the transform-box property.
...And 2 more matches

translate - CSS: Cascading Style Sheets
the translate css property allows you to specify translation transforms individually and independently of the transform property.
... this maps better to typical user interface usage, and saves having to remember the exact order of transform functions to specify in the transform value.
... formal definition initial valuenoneapplies totransformable elementsinheritednopercentagesrefer to the size of bounding boxcomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typea transformcreates stacking contextyes formal syntax none | <length-percentage> [ <length-percentage> <length>?
...And 2 more matches

JSON.parse() - JavaScript
an optional reviver function can be provided to perform a transformation on the resulting object before it is returned.
... reviver optional if a function, this prescribes how the value originally produced by parsing is transformed, before being returned.
... j = eval("(" + text + ")"); // in the optional fourth stage, we recursively walk the new structure, passing // each name/value pair to a reviver function for possible transformation.
...And 2 more matches

Performance fundamentals - Web Performance
firefox is highly optimized to transition and animate scenes that: use pages/panels approximately the size of the device screen or smaller transition/animate the css transform and opacity properties transitions and animations that adhere to these guidelines can be offloaded to the system compositor and run maximally efficiently.
... use css transforms instead of tweaking absolute positioning and fiddling with all that math yourself, use the transform css property to adjust the position, scale, and so forth of your content.
... in addition, transforms give you capabilities you might not otherwise have.
...And 2 more matches

JXON - Archive of obsolete content
the following algorithms are somewhat based on the parker convention, version 0.4, which prescribes the transformation of tags names into object properties names and the recognition of the typeof of all the collected text content of each tag (plain text parsing); but with some differences (so, one can say that we follow a our convention).
... the parker convention the functions listed above for the conversion of an xml document to json (often called "jxon algorithms") are more or less freely based on the parker convention (especially regarding the transformation of tags names into object properties names, the recognition of the typeof of all the collected text content of each tag and the absorption of solitary text and/or cdatasection nodes into primitive values).
... the following is a transcription of the parker convention paper (version 0.4), from the page “transformingrules” of the xml2json-xslt project site.
... resources the parker convention the badgerfish convention jxon: an architecture for schema and annotation driven json/xml bidirectional transformations converting html to other formats: json (the world wide web consortium) jxon – a simple way to keep xml out of your life – dino gambone's blog web reflection: jxon – lossless javascript to xml object notation convertion convert xml to json with javascript – david walsh blog http://goessner.net/download/prj/jsonxml/ – just another json2xml and xml2json conversion tool serializ...

Handling common HTML and CSS problems - Learn web development
so for example: mozilla uses -moz- chrome/opera/safari use -webkit- microsoft uses -ms- here's some examples: -webkit-transform: rotate(90deg); background-image: -moz-linear-gradient(left,green,yellow); background-image: -webkit-gradient(linear,left center,right center,from(green),to(yellow)); background-image: linear-gradient(to right,green,yellow); the first line shows a transform property with a -webkit- prefix — this was needed to make transforms work in chrome, etc.
... store a reference to this element in a variable, for example: const test = document.getelementbyid('hplogo'); now try to set a new value for the css property you are interested in on that element; you can do this using the style property of the element, for example try typing these into the javascript console: test.style.transform = 'rotate(90deg)' test.style.webkittransform = 'rotate(90deg)' as you start to type the property name representation after the second dot (note that in javascript, css property names are written in lower camel case, not hyphenated), the javascript console should begin to autocomplete the names of the properties that exist in the browser and match what you've written so far.
... at the time of writing, both firefox and chrome implemented -webkit- prefixed and non-prefixed versions of transform!
... once you've found out which prefixes you need to support, you should write them all out in your css, for example: -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); this ensures that all browsers that support any of the above forms of the property can make the feature work.

Tracing JIT
the recorder in jstracer inserts lins values into a lir buffer held in a page, itself contained within a logical fragment, and the nanojit compilation pipeline and assembler transform the lins values into nins values.
... nanojit/assembler.* the nanojit/assembler.cpp and nanojit/assembler.h files define the class assembler, which transforms lins values into nins values.
... in other words, an assembler transforms lir code into native code.
... an assembler runs in a single pass over its input, transforming one lins value to zero or more nins values.

Use a source map - Firefox Developer Tools
the javascript sources executed by the browser are often transformed in some way from the original sources created by a developer.
... in these situations, it's much easier to debug the original source, rather than the source in the transformed state that the browser has downloaded.
... a source map is a file that maps from the transformed source to the original source, enabling the browser to reconstruct the original source and present the reconstructed original in the debugger.
... to enable the debugger to work with a source map, you must: generate the source map include a comment in the transformed file, that points to the source map.

Paint Flashing Tool - Firefox Developer Tools
the first way applies the transition to the element's margin-left, while the second way moves the element using the transform property.
... <body> <div id="container"> <div class="moving-box" id="moving-box-left-margin">transition using margin-left</div> <div class="moving-box" id="moving-box-transform">transition using transform</div> </div> </body> #container { border: 1px solid; } .moving-box { height: 20%; width:20%; margin: 2%; padding: 2%; background-color: blue; color: white; font-size: 24px; } #moving-box-left-margin { transition: margin-left 4s; } #moving-box-transform { transition: transform 4s; } body:hover #moving-box-left-margin{ margin-left: 74%; } body:hover #moving-box-transform { transform: translate(300%); } to see the transition, move the mouse into the space below: now switch paint flashing on, and try it again.
... you should see that the margin-left version triggers a series of repaints as the element moves, while the transform version only causes repaints in the start and end positions.
...well, when you use transform, the browser creates a separate layer for the element.

DOMMatrix - Web APIs
dommatrix.setmatrixvalue() replaces the contents of the matrix with the matrix described by the specified transform or transforms.
... dommatrix.skewxself() modifies the matrix by applying the specified skew transformation along the x-axis.
... dommatrix.skewyself() modifies the matrix by applying the specified skew transformation along the y-axis.
...while it's beyond the scope of this article to explain the mathematics involved, this 4×4 size is enough to describe any transformation you might apply to either 2d or 3d geometries.

SVGGraphicsElement - Web APIs
"50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} note: this interface was introduced in svg 2 and replaces the svglocatable and svgtransformable interfaces from svg 1.1.
... svggraphicselement.transform read only an svganimatedtransformlist reflecting the computed value of the transform property and its corresponding transform attribute of the given element.
... svggraphicselement.getctm() returns a dommatrix representing the matrix that transforms the current element's coordinate system to its svg viewport's coordinate system.
... svggraphicselement.getscreenctm() returns a dommatrix representing the matrix that transforms the current element's coordinate system to the coordinate system of the svg viewport for the svg document fragment.

Streams API concepts - Web APIs
there are two methods available in the spec to facilitate this: readablestream.pipethrough() — pipes the stream through a transform stream, which is a pair comprised of a writable stream that has data written to it, and a readable stream that then has the data read out of it — this acts as a kind of treadmill that constantly takes data in and transforms it to a new state.
...you can find more useful ideas and examples in the spec — see transform streams for ideas, and this web sockets example.
...at some point the spec writers hope to add something like a transformstream class to make creating transform streams easier.
...when a stream later in the chain is still busy and isn't yet ready to accept more chunks, it sends a signal backwards through the chain to tell earlier transform streams (or the original source) to slow down delivery as appropriate so that you don't end up with a bottleneck anywhere.

WebGL2RenderingContext.getIndexedParameter() - Web APIs
possible values: gl.transform_feedback_buffer_binding: returns a webglbuffer.
... gl.transform_feedback_buffer_size: returns a glsizeiptr.
... gl.transform_feedback_buffer_start: returns a glintptr.
... examples var binding = gl.getindexedparameter(gl.transform_feedback_buffer_binding, 0); specifications specification status comment webgl 2.0the definition of 'getindexedparameter' in that specification.

WebGLRenderingContext.getParameter() - Web APIs
x_elements_vertices glint gl.max_fragment_input_components glint gl.max_fragment_uniform_blocks glint gl.max_fragment_uniform_components glint gl.max_program_texel_offset glint gl.max_samples glint gl.max_server_wait_timeout glint64 gl.max_texture_lod_bias glfloat gl.max_transform_feedback_interleaved_components glint gl.max_transform_feedback_separate_attribs glint gl.max_transform_feedback_separate_components glint gl.max_uniform_block_size glint64 gl.max_uniform_buffer_bindings glint gl.max_varying_components glint gl.max_vertex_output_components glint gl.max_...
... gl.transform_feedback_active glboolean gl.transform_feedback_binding webgltransformfeedback or null see bindtransformfeedback.
... gl.transform_feedback_buffer_binding webglbuffer or null see bindbuffer.
... gl.transform_feedback_paused glboolean gl.uniform_buffer_binding webglbuffer or null see bindbuffer.

Lighting in WebGL - Web APIs
); gl.vertexattribpointer( programinfo.attriblocations.vertexnormal, numcomponents, type, normalize, stride, offset); gl.enablevertexattribarray( programinfo.attriblocations.vertexnormal); } finally, we need to update the code that builds the uniform matrices to generate and deliver to the shader a normal matrix, which is used to transform the normals when dealing with the current orientation of the cube in relation to the light source: const normalmatrix = mat4.create(); mat4.invert(normalmatrix, modelviewmatrix); mat4.transpose(normalmatrix, normalmatrix); ...
... varying highp vec3 vlighting; void main(void) { gl_position = uprojectionmatrix * umodelviewmatrix * avertexposition; vtexturecoord = atexturecoord; // apply lighting effect highp vec3 ambientlight = vec3(0.3, 0.3, 0.3); highp vec3 directionallightcolor = vec3(1, 1, 1); highp vec3 directionalvector = normalize(vec3(0.85, 0.8, 0.75)); highp vec4 transformednormal = unormalmatrix * vec4(avertexnormal, 1.0); highp float directional = max(dot(transformednormal.xyz, directionalvector), 0.0); vlighting = ambientlight + (directionallightcolor * directional); } `; once the position of the vertex is computed, and we pass the coordinates of the texel corresponding to the vertex to the fragment shader, we can work on computing the shadi...
... the first thing we do is transform the normal based on the current orientation of the cube, by multiplying the vertex's normal by the normal matrix.
... we can then compute the amount of directional lighting that needs to be applied to the vertex by calculating the dot product of the transformed normal and the directional vector (that is, the direction from which the light is coming).

WebGL best practices - Web APIs
(the interpolation of varyings is very cheap, and is done automatically for you through the fixed functionality rasterization phase of the graphics pipeline) for example, a simple animation of a textured surface can be achieved through a time-dependent transformation of texture coordinates.
... (the simplest case being adding a uniform vector to the texture coordinates attribute vector) if visually acceptable, one can transform the texture coordinates in the vertex shader rather than in the fragment shader, to get better performance.
... useprogram(prog1) <pipeline flush> bindframebuffer(target) drawarrays() bindtexture(webgl_texture) -teximage2d(htmlvideoelement): +useprogram(_internal_tex_tranform_prog) <pipeline flush> +bindframebuffer(webgl_texture._internal_framebuffer) +bindtexture(htmlvideoelement._internal_video_tex) +drawarrays() // y-flip/colorspace-transform/alpha-(un)premultiply +bindtexture(webgl_texture) +bindframebuffer(target) +useprogram(prog1) <pipeline flush> drawarrays() ...
... bindtexture(webgl_texture) -teximage2d(htmlvideoelement): +useprogram(_internal_tex_tranform_prog) <pipeline flush> +bindframebuffer(webgl_texture._internal_framebuffer) +bindtexture(htmlvideoelement._internal_video_tex) +drawarrays() // y-flip/colorspace-transform/alpha-(un)premultiply +bindtexture(webgl_texture) +bindframebuffer(target) useprogram(prog1) <pipeline flush> bindframebuffer(target) drawarrays() bindtexture(webgl_texture) drawarrays() ...

XRReferenceSpace - Web APIs
it expands upon the base class, xrspace, by adding support for several different tracking behaviors as well as to request a new reference space which describes the offset transform between the tracked object and another location in the world.
...the new reference space can be used to transform a coordinate from the reference space of the object on which the method is called into a different coordinate space.
... this is useful for positioning objects while rendering, and to perform the needed transforms when changing the viewer's position and/or orientation in 3d space.
... let offsettransform = new xrrigidtransform({x: 2, y: 0, z: 1}, {x: 0, y: 1, z: 0, w: 1}); xrreferencespace = xrreferencespace.getoffsetreferencespace(offsettransform); this replaces the xrreferencespace with a new one whose origin and orientation are adjusted to place the new origin at (2, 0, 1) relative to the current origin and rotated given a unit quaternion that orient...

Color picker tool - CSS: Cascading Style Sheets
elect: none; user-select: none; } .ui-input-slider * { float: left; height: 100%; line-height: 100%; } /* input slider */ .ui-input-slider > input { margin: 0; padding: 0; width: 50px; text-align: center; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .ui-input-slider-info { width: 90px; padding: 0px 10px 0px 0px; text-align: right; text-transform: lowercase; } .ui-input-slider-left, .ui-input-slider-right { width: 16px; cursor: pointer; background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat; } .ui-input-slider-right { background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat; } .ui-input-slider-name { width: 90px; padding: 0 10px 0 0; text-align: right; tex...
...t-transform: lowercase; } .ui-input-slider-btn-set { width: 25px; background-color: #2c9fc9; border-radius: 5px; color: #fff; font-weight: bold; line-height: 14px; text-align: center; } .ui-input-slider-btn-set:hover { background-color: #379b4a; cursor: pointer; } /* * color picker tool */ body { max-width: 1000px; margin: 0 auto; font-family: "segoe ui", arial, helvetica, sans-serif; box-shadow: 0 0 5px 0 #999; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } /** * resize handle */ .resize-handle { width: 10px; height: 10px; background: url('https://mdn.mozillademos.org/files/6083/resize.png') center center no-repeat; position: abs...
...picker-samples { width: 375px; height: 114px; max-height: 218px; margin: 0 10px 0 30px; overflow: hidden; position: relative; float: left; transition: all 0.2s; } #picker-samples .sample { width: 40px; height: 40px; margin: 5px; border: 1px solid #ddd; position: absolute; float: left; transition: all 0.2s; } #picker-samples .sample:hover { cursor: pointer; border-color: #bbb; transform: scale(1.15); border-radius: 3px; } #picker-samples .sample[data-active='true'] { border-color: #999; } #picker-samples .sample[data-active='true']:after { content: ""; position: absolute; background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat; width: 100%; height: 12px; top: -12px; z-index: 2; } #picker-samples #add-icon { width: 100%; height: 100%; ...
... line-height: inherit; } #color-palette .palette { width: 456px; height: 38px; margin: 3px; padding: 3px; display: table; background-color: #fff; } #color-palette .palette .sample { width: 30px; height: 30px; margin: 3px; position: relative; border: 1px solid #ddd; float: left; transition: all 0.2s; } #color-palette .palette .sample:hover { cursor: pointer; border-color: #bbb; transform: scale(1.15); border-radius: 3px; } #color-palette .controls { } #color-palette .controls > * { float: left; } #color-palette .controls > *:hover { cursor: pointer; } #color-palette .controls .lock { width: 24px; height: 24px; margin: 10px; padding: 3px; background-image: url('https://mdn.mozillademos.org/files/6077/lock.png'); background-repeat: no-repeat; background-position: bott...

WebKit CSS extensions - CSS: Cascading Style Sheets
spective-origin-x -webkit-perspective-origin-y -webkit-print-color-adjust r-s -webkit-rtl-ordering -webkit-svg-shadow t -webkit-tap-highlight-color -webkit-text-combine -webkit-text-decoration-skip -webkit-text-decorations-in-effect -webkit-text-fill-color -webkit-text-security -webkit-text-stroke-color -webkit-text-stroke-width -webkit-text-stroke -webkit-text-zoom -webkit-transform-origin-x -webkit-transform-origin-y -webkit-transform-origin-z u -webkit-user-drag -webkit-user-modify * a few are on the standards, unprefixed track ** new syntax has been standardized.
...ion -webkit-text-color-decoration -webkit-text-decoration-line -webkit-text-decoration-style -epub-text-emphasis -webkit-text-emphasis -epub-text-emphasis-color -webkit-text-emphasis-color -webkit-text-emphasis-position -epub-text-emphasis-style -webkit-text-emphasis-style -webkit-text-justify -webkit-text-orientation -webkit-text-size-adjust -webkit-text-underline-position -webkit-transform -webkit-transform-origin -webkit-transform-style -webkit-transition -webkit-transition-delay -webkit-transition-duration -webkit-transition-property -webkit-transition-timing-function u-w -webkit-user-select -epub-word-break -epub-writing-mode supported in non-webkit browsers without a prefix, but not standard the following properties are supported in at least one browser withou...
...bkit-mask-composite* -webkit-mask-image -webkit-mask-origin -webkit-mask-position -webkit-mask-position-x** -webkit-mask-position-y** -webkit-mask-repeat -webkit-mask-size o-p -webkit-order -webkit-perspective -webkit-perspective-origin t -webkit-text-fill-color** -webkit-text-size-adjust -webkit-text-stroke** -webkit-text-stroke-color** -webkit-text-stroke-width** -webkit-transform -webkit-transform-origin -webkit-transition -webkit-transition-delay -webkit-transition-duration -webkit-transition-property -webkit-transition-timing-function u -webkit-user-select *supported with -moz- and -webkit- prefix in firefox, but not supported without a prefix.
... media features -webkit-animation -webkit-device-pixel-ratio -webkit-transform-2d -webkit-transform-3d -webkit-transition ...

perspective-origin - CSS: Cascading Style Sheets
the perspective-origin and perspective properties are attached to the parent of a child transformed in 3-dimensional space, unlike the perspective() transform function which is placed on the element being transformed.
... formal definition initial value50% 50%applies totransformable elementsinheritednopercentagesrefer to the size of bounding boxcomputed valuefor <length> the absolute value, otherwise a percentageanimation typesimple list of length, percentage, or calc formal syntax <position>where <position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]?
...ight; } .po200200neg { perspective-origin: -200% -200%; } .po200200pos { perspective-origin: 200% 200%; } .po200200 { perspective-origin: 200% -200%; } /* define the container div, the cube div, and a generic face */ .container { width: 100px; height: 100px; margin: 24px; border: none; } .cube { width: 100%; height: 100%; backface-visibility: visible; perspective: 300px; transform-style: preserve-3d; } .face { display: block; position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: sans-serif; font-size: 60px; color: white; text-align: center; } /* define each face based on direction */ .front { background: rgba(0, 0, 0, 0.3); transform: translatez(50px); } .back { background: rgba(0, 255, 0, 1); color: b...
...lack; transform: rotatey(180deg) translatez(50px); } .right { background: rgba(196, 0, 0, 0.7); transform: rotatey(90deg) translatez(50px); } .left { background: rgba(0, 0, 196, 0.7); transform: rotatey(-90deg) translatez(50px); } .top { background: rgba(196, 196, 0, 0.7); transform: rotatex(90deg) translatez(50px); } .bottom { background: rgba(196, 0, 196, 0.7); transform: rotatex(-90deg) translatez(50px); } /* make the layout a little nicer */ section { background-color: #eee; padding: 10px; font-family: sans-serif; text-align: left; display: grid; grid-template-columns: repeat(3, 1fr); } result specifications specification status comment css transforms level 2the definition of 'perspective-origin' in that specification.

rotate - CSS: Cascading Style Sheets
the rotate css property allows you to specify rotation transforms individually and independently of the transform property.
... this maps better to typical user interface usage, and saves having to remember the exact order of transform functions to specify in the transform property.
... formal definition initial valuenoneapplies totransformable elementsinheritednocomputed valueas specifiedanimation typea transformcreates stacking contextyes formal syntax none | <angle> | [ x | y | z | <number>{3} ] && <angle> examples rotate an element on hover html <div> <p class="rotate">rotation</p> </div> css * { box-sizing: border-box; } html { font-family: sans-serif; } div { width: 150px; margin: 0 auto; } p { padding:...
... 10px 5px; border: 3px solid black; border-radius: 20px; width: 150px; font-size: 1.2rem; text-align: center; } .rotate { transition: rotate 1s; } div:hover .rotate { rotate: 1 -0.5 1 180deg; } result specifications specification status comment css transforms level 2the definition of 'individual transforms' in that specification.

scale - CSS: Cascading Style Sheets
the scale css property allows you to specify scale transforms individually and independently of the transform property.
... this maps better to typical user interface usage, and saves having to remember the exact order of transform functions to specify in the transform value.
... formal definition initial valuenoneapplies totransformable elementsinheritednocomputed valueas specifiedanimation typea transformcreates stacking contextyes formal syntax none | <number>{1,3} examples scaling an element on hover html <div> <p class="scale">scaling</p> </div> css * { box-sizing: border-box; } html { font-family: sans-serif; } div { width: 150px; margin: 0 auto; } p { padding: 10px 5px; border: 3px solid black;...
... border-radius: 20px; width: 150px; font-size: 1.2rem; text-align: center; } .scale { transition: scale 1s; } div:hover .scale { scale: 2 0.7; } result specifications specification status comment css transforms level 2the definition of 'individual transforms' in that specification.

matrix() - CSS: Cascading Style Sheets
the matrix() css function defines a homogeneous 2d transformation matrix.
... its result is a <transform-function> data type.
... matrix(a, b, c, d, tx, ty) values a b c d are <number>s describing the linear transformation.
... ac bd actxbdty001 actxbdty001 ac0txbd0ty00100001 [a b c d tx ty] the values represent the following functions: matrix( scalex(), skewy(), 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.

skew() - CSS: Cascading Style Sheets
the skew() css function defines a transformation that skews an element on the 2d plane.
... its result is a <transform-function> data type.
... this transformation is a shear mapping (transvection) that distorts each point within an element by a certain angle in the horizontal and vertical directions.
...ordinates on ℝ3 homogeneous coordinates on ℝℙ3 1tan(ax)tan(ay)1 1tan(ax)0tan(ay)10001 1tan(ax)0tan(ay)10001 1tan(ax)00tan(ay)10000100001 [1 tan(ay) tan(ax) 1 0 0] examples using a single x-angle html <div>normal</div> <div class="skewed">skewed</div> css div { width: 80px; height: 80px; background-color: skyblue; } .skewed { transform: skew(10deg); /* equal to skewx(10deg) */ background-color: pink; } result using two angles html <div>normal</div> <div class="skewed">skewed</div> css div { width: 80px; height: 80px; background-color: skyblue; } .skewed { transform: skew(10deg, 10deg); background-color: pink; } result specifications specification status comment css transfo...

skewX() - CSS: Cascading Style Sheets
the skewx() css function defines a transformation that skews an element in the horizontal direction on the 2d plane.
... its result is a <transform-function> data type.
... this transformation is a shear mapping (transvection) that distorts each point within an element by a certain angle in the horizontal direction.
... ℝ2 homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 1tan(a)01 1tan(a)0010001 1tan(a)0010001 1tan(a)00010000100001 [1 0 tan(a) 1 0 0] examples html <div>normal</div> <div class="skewed">skewed</div> css div { width: 80px; height: 80px; background-color: skyblue; } .skewed { transform: skewx(10deg); /* equal to skew(10deg) */ background-color: pink; } result specifications specification status comment css transforms level 1the definition of 'skewx()' in that specification.

skewY() - CSS: Cascading Style Sheets
the skewy() css function defines a transformation that skews an element in the vertical direction on the 2d plane.
... its result is a <transform-function> data type.
... this transformation is a shear mapping (transvection) that distorts each point within an element by a certain angle in the vertical direction.
... ℝ2 homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 10tan(a)1 100tan(a)10001 100tan(a)10001 1000tan(a)10000100001 [1 tan(a) 0 1 0 0] examples html <div>normal</div> <div class="skewed">skewed</div> css div { width: 80px; height: 80px; background-color: skyblue; } .skewed { transform: skewy(40deg); background-color: pink; } result specifications specification status comment css transforms level 1the definition of 'skewy()' in that specification.

will-change - CSS: Cascading Style Sheets
/* keyword values */ will-change: auto; will-change: scroll-position; will-change: contents; will-change: transform; /* example of <custom-ident> */ will-change: opacity; /* example of <custom-ident> */ will-change: left, top; /* example of two <animateable-feature> */ /* global values */ will-change: inherit; will-change: initial; will-change: unset; proper usage of this property can be a bit tricky: don't apply will-change to too many elements.
...the spec doesn't define the behavior of particular value, but it is common for transform to be a compositing layer hint.
... .slide { will-change: transform; } formal definition initial valueautoapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax auto | <animateable-feature>#where <animateable-feature> = scroll-position | contents | <custom-ident> examples via script this is an example showing how to apply the will-change property through scripting, which is probably what you should be doing in most ...
... var el = document.getelementbyid('element'); // set will-change when the element is hovered el.addeventlistener('mouseenter', hintbrowser); el.addeventlistener('animationend', removehint); function hintbrowser() { // the optimizable properties that are going to change // in the animation's keyframes block this.style.willchange = 'transform, opacity'; } function removehint() { this.style.willchange = 'auto'; } specifications specification status comment css will change module level 1the definition of 'will-change' in that specification.

to - SVG: Scalable Vector Graphics
five elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, <animatetransform>, and <set> html, body, svg { height: 100%; } <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" width="100" height="100"> <animate attributetype="xml" attributename="width" fill="freeze" from="100" to="150" dur="3s"/> </rect> </svg> animate, animatecolor, animatemotion, animatetransform for <animate>, <animatecolor>, <animatemotion>, and <animatetransform>, to specifies the ending value of the animation.
... editor's draft no change svg animations level 2the definition of 'to for <animate>, <animatecolor>, <animatemotion>, and <animatetransform>' in that specification.
... recommendation initial definition for <set> scalable vector graphics (svg) 1.1 (second edition)the definition of 'to for <animate>, <animatecolor>, <animatemotion>, and <animatetransform>' in that specification.
... recommendation initial definition for <animate>, <animatecolor>, <animatemotion>, and <animatetransform> ...

values - SVG: Scalable Vector Graphics
five elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, <animatetransform>, and <fecolormatrix> animate, animatecolor, animatemotion, animatetransform for <animate>, <animatecolor>, <animatemotion>, and <animatetransform>, values is a list of values defining the sequence of values over the course of the animation.
... working draft no change svg animations level 2the definition of 'values for <animate>, <animatecolor>, <animatemotion>, and <animatetransform>' in that specification.
... recommendation initial definition for <fecolormatrix> scalable vector graphics (svg) 1.1 (second edition)the definition of 'values for <animate>, <animatecolor>, <animatemotion>, and <animatetransform>' in that specification.
... recommendation initial definition for <animate>, <animatecolor>, <animatemotion>, and <animatetransform> ...

SVG Attribute reference - SVG: Scalable Vector Graphics
gemode elevation enable-background end exponent externalresourcesrequired f fill fill-opacity fill-rule filter filterres filterunits flood-color flood-opacity font-family font-size font-size-adjust font-stretch font-style font-variant font-weight format from fr fx fy g g1 g2 glyph-name glyph-orientation-horizontal glyph-orientation-vertical glyphref gradienttransform gradientunits h hanging height href hreflang horiz-adv-x horiz-origin-x i id ideographic image-rendering in in2 intercept k k k1 k2 k3 k4 kernelmatrix kernelunitlength kerning keypoints keysplines keytimes l lang lengthadjust letter-spacing lighting-color limitingconeangle local m marker-end marker-mid marker-start markerheight markerunits m...
...arkerwidth mask maskcontentunits maskunits mathematical max media method min mode n name numoctaves o offset opacity operator order orient orientation origin overflow overline-position overline-thickness p panose-1 paint-order path pathlength patterncontentunits patterntransform patternunits ping pointer-events points pointsatx pointsaty pointsatz preservealpha preserveaspectratio primitiveunits r r radius referrerpolicy refx refy rel rendering-intent repeatcount repeatdur requiredextensions requiredfeatures restart result rotate rx ry s scale seed shape-rendering slope spacing specularconstant specularexponent speed spreadmethod startoffset stddeviation stemh stemv stitchtiles stop-color stop-opacity striketh...
...rough-position strikethrough-thickness string stroke stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-width style surfacescale systemlanguage t tabindex tablevalues target targetx targety text-anchor text-decoration text-rendering textlength to transform transform-origin type u u1 u2 underline-position underline-thickness unicode unicode-bidi unicode-range units-per-em v v-alphabetic v-hanging v-ideographic v-mathematical values vector-effect version vert-adv-y vert-origin-x vert-origin-y viewbox viewtarget visibility w width widths word-spacing writing-mode x x x-height x1 x2 xchannelselector xlink:actuate xlink:arcrole xlink:href xlink:role xlink:show xlink:ti...
...tation-horizontal, glyph-orientation-vertical, image-rendering, kerning, letter-spacing, lighting-color, marker-end, marker-mid, marker-start, mask, opacity, overflow, pointer-events, shape-rendering, stop-color, stop-opacity, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, text-anchor, text-decoration, text-rendering, transform, transform-origin, unicode-bidi, vector-effect, visibility, word-spacing, writing-mode filters attributes filter primitive attributes height, result, width, x, y transfer function attributes type, tablevalues, slope, intercept, amplitude, exponent, offset animation attributes animation attribute target attributes attributetype, attributename animation timing attributes begin, dur, end, ...

<feColorMatrix> - SVG: Scalable Vector Graphics
the <fecolormatrix> svg filter element changes colors based on a transformation matrix.
... the prime symbol ' is used in mathematics indicate the result of a transformation.
..."40" cy="50" r="20" fill="red" fill-opacity="0.5" /> </g> </defs> <use href="#circles" /> <text x="70" y="50">reference</text> <!-- identity matrix --> <filter id="colormethesame"> <fecolormatrix in="sourcegraphic" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0" /> </filter> <use href="#circles" transform="translate(0 70)" filter="url(#colormethesame)" /> <text x="70" y="120">identity matrix</text> <!-- combine rgb into green matrix --> <filter id="colormegreen"> <fecolormatrix in="sourcegraphic" type="matrix" values="0 0 0 0 0 1 1 1 1 0 0 0 0 0 0 0 0 0 1 0" /> </filter> <use href="#circles" transform="translate(0 140)"...
... filter="url(#colormegreen)" /> <text x="70" y="190">rgbtogreen</text> <!-- saturate --> <filter id="colormesaturate"> <fecolormatrix in="sourcegraphic" type="saturate" values="0.2" /> </filter> <use href="#circles" transform="translate(0 210)" filter="url(#colormesaturate)" /> <text x="70" y="260">saturate</text> <!-- huerotate --> <filter id="colormehuerotate"> <fecolormatrix in="sourcegraphic" type="huerotate" values="180" /> </filter> <use href="#circles" transform="translate(0 280)" filter="url(#colormehuerotate)" /> <text x="70" y="330">huerotate</text> <!-- luminancetoalpha --> <filter id="colormelta"> <fecolormatrix in="sourcegraphic" type="luminancetoalpha" /> </filter> <use href="#circles" transform="tran...

<linearGradient> - SVG: Scalable Vector Graphics
html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <lineargradient id="mygradient" gradienttransform="rotate(90)"> <stop offset="5%" stop-color="gold" /> <stop offset="95%" stop-color="red" /> </lineargradient> </defs> <!-- using my linear gradient --> <circle cx="5" cy="5" r="4" fill="url('#mygradient')" /> </svg> attributes gradientunits this attribute defines the coordinate system for attributes x1, x2, y1, y2 value type: userspaceonuse|objectboundingbox ; def...
...ault value: objectboundingbox; animatable: yes gradienttransform this attribute provides additional transformation to the gradient coordinate system.
... value type: <transform-list> ; default value: identity transform; animatable: yes href this attribute defines a reference to another <lineargradient> element that will be used as a template.
...s global event attributes, document element event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility xlink attributes xlink:href, xlink:title usage notes categoriesgradient elementpermitted contentany number of the following elements, in any order:descriptive elements<animate>, <animatetransform>, <set>, <stop> specifications specification status comment scalable vector graphics (svg) 2the definition of '<lineargradient>' in that spec...

The Implementation of the Application Object Model - Archive of obsolete content
in recent years, xul dropped the z from its name and replaced it with an x, and upon doing so, transformed into something far worse than a demon.
..."couldn't you just perform a tree transformation on whatever representation you have in memory?" the answer is "yes, provided there is one single common intermediate representation of the collected and aggregated data to use as the basis for the translation." "why?" you ask.
...then without some common internal representation of the data, it would be necessary to implement n*n total translators in order to guarantee that for whatever content model you happen to have built that the transformation could be applied.

Bounding volume collision detection with THREE.js - Game development
so any transformations such as scale, position, etc.
... a more simple alternative that fixes the previous issue is to set those boundaries later on with box3.setfromobject, which will compute the dimensions taking into account a 3d entity's transformations and any child meshes as well.
...so if we apply transformations or change the position of the mesh, we need to manually update the bounding sphere.

How CSS is structured - Learn web development
another example would be the various values for transform, such as rotate().
... <div class="box"></div> .box { margin: 30px; width: 100px; height: 100px; background-color: rebeccapurple; transform: rotate(0.8turn) } the output from the above code looks like this: look up different values of properties listed below.
... write css rules that apply styling to different html elements: transform background-image, in particular gradient values color, in particular rgb/rgba/hsl/hsla values @rules css @rules (pronounced "at-rules") provide instruction for what css should perform or how it should behave.

create fancy boxes - Learn web development
its pseudo-element: ::before and ::after and some aside properties like: box-shadow, transform, outline, etc.
... the box-shadow property allow us to create inner light and a flat drop shadow effect, but with some little extra work it becomes possible to create a more natural geometry by using pseudo-element and the transform property.
... .fancy { position: relative; background-color: #ffc; padding: 2rem; text-align: center; max-width: 200px; } .fancy::before { content: ""; position : absolute; z-index : -1; bottom : 15px; right : 5px; width : 50%; top : 80%; max-width: 200px; box-shadow: 0px 13px 10px black; transform: rotate(4deg); } what's next in many ways, making a fancy box is mostly about adding color and images within the background, so it could worth digging into managing colors and images.

Styling web forms - Learn web development
note: you could also use the transform property to help you with positioning your <legend>.
... however, when you position it with for example a transform: translatey();, it moves but leaves an ugly gap in the <fieldset> border, which is not easy to get rid of.
...%; border-right: 1px solid; /* resize : none; */ overflow: auto; } styling the submit button the <button> element is really convenient to style with css; you can do whatever you want, even using pseudo-elements: button { padding : 5px; font : bold .6em sans-serif; border : 2px solid #333; border-radius: 5px; background : none; cursor : pointer; transform : rotate(-1.5deg); } button:after { content : " >>>"; } button:hover, button:focus { outline : none; background : #000; color : #fff; } the final result and voila!

UI pseudo-classes - Learn web development
for example, in our custom radio buttons example, we use generated content to handle the placement and animation of the inner circle when a radio button is selected: input[type="radio"]::before { display: block; content: " "; width: 10px; height: 10px; border-radius: 6px; background-color: red; font-size: 1.2em; transform: translate(3px, 3px) scale(0); transform-origin: center; transition: all 0.3s ease-in; } input[type="radio"]:checked::before { transform: translate(3px, 3px) scale(1); transition: all 0.3s cubic-bezier(0.25, 0.25, 0.56, 2); } this is really useful — screenreaders already let their users know when a radio button or checkbox they encounter is checked/selected, so you don't want them to ...
... as a recap, the :checked code from our styled radio buttons example looks like so: input[type="radio"]::before { display: block; content: " "; width: 10px; height: 10px; border-radius: 6px; background-color: red; font-size: 1.2em; transform: translate(3px, 3px) scale(0); transform-origin: center; transition: all 0.3s ease-in; } input[type="radio"]:checked::before { transform: translate(3px, 3px) scale(1); transition: all 0.3s cubic-bezier(0.25, 0.25, 0.56, 2); } you can try it out here: basically, we build the styling for the radio button "inner circle" using the ::before pseudo element, but set a scale(0) transform on ...
...the advantage of using a transform rather than transitioning width/height is that you can use transform-origin to make it grow from the center of the circle, rather than having it appear to grow from the circle's corner.

What is JavaScript? - Learn web development
we can mark it up using html to give it structure and purpose: <p>player 1: chris</p> then we can add some css into the mix to get it looking nice: p { font-family: 'helvetica neue', helvetica, sans-serif; letter-spacing: 1px; text-transform: uppercase; text-align: center; border: 2px solid rgba(0,0,200,0.6); background: rgba(0,0,200,0.3); color: rgba(0,0,200,0.6); box-shadow: 1px 1px 2px rgba(0,0,200,0.4); border-radius: 10px; padding: 3px 10px; display: inline-block; cursor: pointer; } and finally, we can add some javascript to implement dynamic behaviour: const para = document.queryselector('p'); para.addeve...
...you don't have to transform the code into a different form before the browser runs it.
... compiled languages on the other hand are transformed (compiled) into another form before they are run by the computer.

CSS performance optimization - Learn web development
properties that will lead to compositing include 3d transforms (transform: translatez(), rotate3d(), etc.), animating transform and opacity, position: fixed, will-change, and filter.
...when an element is promoted as a layer, also known as composited, animating transform properties is done in the gpu, resulting in improved performance, especially on mobile.
... will-change: opacity, transform; the font-display property applied to the @font-face rule, the font-display property defines how font files are loaded and displayed by the browser, allowing text to appear with a fallback font while a font loads, or fails to load.

SVG Guidelines
nested transforms some editors use <g> tags to do nested transforms, which is usually not needed.
... you can avoid this by doing basic algebra, for example: <g transform="translate(-62, -310)"><shape transform="translate(60, 308)"/></g> can be cut down to: <shape transform="translate(-2,-2)"/> because: -62+60 = -310+308 = -2 performance tips these rules are optional, but they help speeding up the svg.
... instead of using css/svg transforms, apply directly the transform on the path/shape definition.

Extras
5px" depth="15px" voffset="-15px"> <mtext> <svg width="30px" height="30px"> <defs> <radialgradient id="radgrad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:1;"/> <stop offset="100%" style="stop-color:rgb(255,0,0); stop-opacity:.8;"/> </radialgradient> </defs> <g transform="translate(15,15)"> <g> <animatetransform attributename="transform" attributetype="xml" type="rotate" from="360" to="0" dur="15s" repeatcount="indefinite"/> <g transform="translate(-15, -15)"> <path fill="url(#radgrad1)" d="m 15 0 l 20 10 l 30 15 l 20 20 l 15 30 ...
...pacity:1"/> <stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1"/> </lineargradient> <radialgradient id="grad3" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:rgb(0,255,255);stop-opacity:1"/> <stop offset="100%" style="stop-color:rgb(255,255,255);stop-opacity:.8"/> </radialgradient> </defs> <rect width="300" height="250" fill="url(#grad1)"/> <g transform="translate(150,125)"> <g> <animatetransform attributename="transform" attributetype="xml" type="rotate" from="0" to="360" dur="6s" repeatcount="indefinite"/> <g transform="translate(-50,-35)"> <rect width="100" height="70" fill="url(#grad2)"/> <switch> <foreignobject width="100" height="70" requiredextensions="http://...
...d> </mtr> <mtr> <mtd><mi>sin</mi><mi>θ</mi></mtd> <mtd><mi>cos</mi><mi>θ</mi></mtd> </mtr> </mtable> <mo>)</mo> </mrow> </math> </foreignobject> <text>rotation matrix</text> </switch> </g></g></g> <g> <animatemotion path="m 32,69 c 64,121 100,27 152,42 203,56 239,257 275,161 295,109 144,221 88,214 -2,202 11,35 32,69 z" begin="0s" dur="20s" repeatcount="indefinite"/> <animatetransform attributename="transform" attributetype="xml" type="scale" values="1;2;.5;1" keytimes="0;.25;.75;1" dur="20s" repeatcount="indefinite"/> <circle fill="url(#grad3)" r="30"/> <g transform="translate(-30,-30)"> <switch> <foreignobject width="60" height="60" requiredextensions="http://www.w3.org/1998/math/mathml"> <math display="block"> <mrow> <munderov...

JSS Provider Notes
keyfactory supported algorithms notes dsa rsa the following transformations are supported for generatepublic() and generateprivate(): from to rsapublickeyspec rsapublickey dsapublickeyspec dsapublickey x509encodedkeyspec rsapublickey ...
... secretkeyfactory supported algorithms notes aes des desede (des3 ) pbahmacsha1 pbewithmd5anddes pbewithsha1anddes pbewithsha1anddesede (pbewithsha1anddes3 ) pbewithsha1and128rc4 rc4 generatesecret supports the following transformations: keyspec class key algorithm pbekeyspec org.mozilla.jss.crypto.pbekeygenparams using the appropriate pbe algorithm: des desede rc4 desedekeyspec desede ...
... deskeyspec des secretkeyspec aes des desede rc4 getkeyspec supports the following transformations: key algorithm keyspec class desede desedekeyspec des deskeyspec desede des aes rc4 secretkeyspec for increased security, some secretkeys may not be extractable from their pkcs #11 to...

Mozilla-JSS JCA Provider notes
keyfactory supported algorithms notes dsa rsa the following transformations are supported for generatepublic() and generateprivate(): from to rsapublickeyspec rsapublickey dsapublickeyspec dsapublickey x509encodedkeyspec rsapublickey dsapublickey rsaprivatecrtkeyspec rsaprivatekey dsaprivatekeyspec dsaprivatekey pkcs8encoded...
... secretkeyfactory supported algorithms notes aes des desede (des3) pbahmacsha1 pbewithmd5anddes pbewithsha1anddes pbewithsha1anddesede (pbewithsha1anddes3) pbewithsha1and128rc4 rc4 generatesecret supports the following transformations: keyspec class key algorithm pbekeyspec org.mozilla.jss.crypto.pbekeygenparams using the appropriate pbe algorithm: des desede rc4 desedekeyspec desede deskeyspec des secretkeyspec aes des desede rc4 getkeyspec supports the following ...
...transformations: key algorithm keyspec class desede desedekeyspec des deskeyspec desede des aes rc4 secretkeyspec for increased security, some secretkeys may not be extractable from their pkcs #11 token.

Index - Firefox Developer Tools
just hover over the rule: 73 visualize transforms guide, inspector, tools if you hover over a transform property in the rules view, you'll see the transformation overlaid in the page: 74 work with animations guide, inspector, tools this article covers three tools you can use to visualize and edit animations: 75 animation inspector (firefox 41 and 42) the animation inspector enables you to: ...
... 131 step through code debugger, devtools, javascript, step through code when the debugger is stopped at a breakpoint, you can step through it using four buttons in the toolbar: 132 use a source map the javascript sources executed by the browser are often transformed in some way from the original sources created by a developer.
... 137 source map errors debugger, debugging, dev tools, reference, source maps, tools source maps are json files providing a way to associate transformed sources, as seen by the browser, with their original sources, as written by the developer.

BaseAudioContext.createPeriodicWave() - Web APIs
you can think of it as the result of a fourier transform, where you get frequency domain values from time domain value.
... here, with createperiodicwave(), you specify the frequencies, and the browser performs an inverse fourier transform to get a time domain buffer for the frequency of the oscillator.
... the coefficients of the fourier transform should be given in ascending order (i.e.

Determining the dimensions of elements - Web APIs
most of the time these are the same as width and height of element.getboundingclientrect(), when there aren't any transforms applied to the element.
... in case of transforms, the offsetwidth and offsetheight returns the element's layout width and height, while getboundingclientrect() returns the rendering width and height.
... as an example, if the element has width: 100px; and transform: scale(0.5); the getboundingclientrect() will return 50 as the width, while offsetwidth will return 100.

CanvasRenderingContext2D.rotate() - Web APIs
the canvasrenderingcontext2d.rotate() method of the canvas 2d api adds a rotation to the transformation matrix.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // point of transform origin ctx.arc(0, 0, 5, 0, 2 * math.pi); ctx.fillstyle = 'blue'; ctx.fill(); // non-rotated rectangle ctx.fillstyle = 'gray'; ctx.fillrect(100, 0, 80, 20); // rotated rectangle ctx.rotate(45 * math.pi / 180); ctx.fillstyle = 'red'; ctx.fillrect(100, 0, 80, 20); // reset transformation matrix to the identity matrix ctx.settransform(1, 0, 0, 1, 0, 0); result the center of rotation is blue.
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // non-rotated rectangle ctx.fillstyle = 'gray'; ctx.fillrect(80, 60, 140, 30); // matrix transformation ctx.translate(150, 75); ctx.rotate(math.pi / 2); ctx.translate(-150, -75); // rotated rectangle ctx.fillstyle = 'red'; ctx.fillrect(80, 60, 140, 30); result the non-rotated rectangle is gray, and the rotated rectangle is red.

CanvasRenderingContext2D.translate() - Web APIs
the canvasrenderingcontext2d.translate() method of the canvas 2d api adds a translation transformation to the current matrix.
... syntax void ctx.translate(x, y); the translate() method adds a translation transformation to the current matrix by moving the canvas and its origin x units horizontally and y units vertically on the grid.
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // moved square ctx.translate(110, 30); ctx.fillstyle = 'red'; ctx.fillrect(0, 0, 80, 80); // reset current transformation matrix to the identity matrix ctx.settransform(1, 0, 0, 1, 0, 0); // unmoved square ctx.fillstyle = 'gray'; ctx.fillrect(0, 0, 80, 80); result the moved square is red, and the unmoved square is gray.

DOMMatrix() - Web APIs
syntax var dommatrix = new dommatrix([init]) parameters init optional a string containing a sequence of numbers or an array of numbers specifying the matrix you want to create, or a css transform string.
... example this example creates a dommatrix to use as an argument for calling point.matrixtransform().
... var point = new dompoint(5, 4); var scalex = 2; var scaley = 3; var translatex = 12; var translatey = 8; var angle = math.pi / 2; var matrix = new dommatrix([ math.sin(angle) * scalex, math.cos(angle) * scalex, -math.sin(angle) * scaley, math.cos(angle) * scaley, translatex, translatey ]); var transformedpoint = point.matrixtransform(matrix); specifications specification status comment geometry interfaces module level 1the definition of 'dommatrix' in that specification.

DOMMatrixReadOnly - Web APIs
dommatrixreadonly.skewx() returns a new dommatrix created by applying the specified skew transformation to the source matrix along its x-axis.
... dommatrixreadonly.skewy() returns a new dommatrix created by applying the specified skew transformation to the source matrix along its y-axis.
... dommatrixreadonly.transformpoint() transforms the specified point using the matrix, returning a new dompoint object containing the transformed point.

Document Object Model (DOM) - Web APIs
svg interfaces svg element interfaces svgaelement svgaltglyphelement svgaltglyphdefelement svgaltglyphitemelement svganimationelement svganimateelement svganimatecolorelement svganimatemotionelement svganimatetransformelement svgcircleelement svgclippathelement svgcolorprofileelement svgcomponenttransferfunctionelement svgcursorelement svgdefselement svgdescelement svgelement svgellipseelement svgfeblendelement svgfecolormatrixelement svgfecomponenttransferelement svgfecompositeelement svgfeconvolvematrixelement svgfediffuselightingelement svgfedisplacementmapelement svgfedistantlightelement ...
...s svgpathsegarcrel svgpathseglinetohorizontalabs svgpathseglinetohorizontalrel svgpathseglinetoverticalabs svgpathseglinetoverticalrel svgpathsegcurvetocubicsmoothabs svgpathsegcurvetocubicsmoothrel svgpathsegcurvetoquadraticsmoothabs svgpathsegcurvetoquadraticsmoothrel svgpathseglist svgpoint svgpointlist svgpreserveaspectratio svgrect svgstringlist svgtransform svgtransformlist animated type svganimatedangle svganimatedboolean svganimatedenumeration svganimatedinteger svganimatedlength svganimatedlengthlist svganimatednumber svganimatednumberlist svganimatedpathdata svganimatedpoints svganimatedpreserveaspectratio svganimatedrect svganimatedstring svganimatedtransformlist smil-related interfaces elementtimecontrol timeeven...
...t other svg interfaces getsvgdocument shadowanimation svgcolorprofilerule svgcssrule svgdocument svgexception svgexternalresourcesrequired svgfittoviewbox svglangspace svglocatable svgrenderingintent svgstylable svgtests svgtransformable svgunittypes svguseelementshadowroot svgurireference svgviewspec svgzoomandpan svgzoomevent specifications specification status comment dom living standard ...

Element.animate() - Web APIs
for instance with transform, a translatex(-200px) would not override an earlier rotate(20deg) value but result in translatex(-200px) rotate(20deg).
... document.getelementbyid("tunnel").animate([ // keyframes { transform: 'translatey(0px)' }, { transform: 'translatey(-300px)' } ], { // timing options duration: 1000, iterations: infinity }); implicit to/from keyframes in newer browser versions, you are able to set a beginning or end state for an animation only (i.e.
...for example, consider this simple animation — the keyframe object looks like so: let rotate360 = [ { transform: 'rotate(360deg)' } ]; we have only specified the end state of the animation, and the beginning state is implied.

File - Web APIs
blob.prototype.stream() transforms the file into a readablestream that can be used to read the file contents.
... blob.prototype.text() transforms the file into a stream and reads it to completion.
... blob.prototype.arraybuffer() transforms the file into a stream and reads it to completion.

HTMLOrForeignElement.dataset - Web APIs
name conversion dash-style to camelcase conversion a custom data attribute name is transformed to a key for the domstringmap entry with the following rules the prefix data- is removed (including the dash); for any dash (u+002d) followed by an ascii lowercase letter a to z, the dash is removed, and the letter is transformed into its uppercase counterpart; other characters (including other dashes) are left unchanged.
... camelcase to dash-style conversion the opposite transformation, which maps a key to an attribute name, uses the following rules: restriction: before the transformation, a dash must not be immediately followed by an ascii lowercase letter a to z; the prefix data- is added; any ascii uppercase letter a to z is transformed into a dash, followed by its lowercase counterpart; other characters are left unchanged.
... the restriction in the rules above ensures that the two transformations are the inverse one of the other.

Path2D.addPath() - Web APIs
syntax void path.addpath(path [, transform]); parameters path a path2d path to add.
... transform optional a dommatrix to be used as the transformation matrix for the path that is added.
... const canvas = 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 definit...

PeriodicWave - Web APIs
you can think of it as the result of a fourier transform, where you get frequency domain values from time domain value.
... here, with createperiodicwave(), you specify the frequencies, and the browser performs an inverse fourier transform to get a time domain buffer for the frequency of the oscillator.
... the coefficients of the fourier transform should be given in ascending order (i.e.

Point - Web APIs
point is an interface, which existed only briefly in the css transforms level 1 specification, which represents a point in 2-dimensional space.
... specifications this class was specified in the defunct 20 march 2009 working draft of css 2d transforms module level 3.
... it is not present in the current working draft of the css transforms level 1 specification.

getBBox() - Web APIs
it also does not account for any transformation applied to the element or its parents.
...this value is irrespective of any transformation attribute applied to it or the parent elements.
... example html <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <g id="group_text_1"> <text x="5" y="16" transform="scale(2, 2)">hello world!</text> <text x="8" y="32" transform="translate(0 20) scale(1.25 1)">hello world again!</text> </g> <!-- shows bbox in green --> <rect id="rect_1" stroke="#00ff00" stroke-width="3" fill="none"> </rect> <!-- shows boundingclientrect in red --> <rect id="rect_2" stroke="#ff0000" stroke-width="3" fill="none"></rect> </svg> javascript var rectbbox = document.queryselector('#rect_1'); var rectboundingclientrect = document.queryselector('#rect_2'); var groupelement = document.queryselector('#group_text_1'); var bboxgroup = groupelement.getbbox(); rectbbox.setattribute('x', bboxgroup.x); rectbbox.setattribut...

Using readable streams - Web APIs
this involves two methods — readablestream.pipethrough(), which pipes a readable stream through a writer/reader pair to transform one data format into another, and readablestream.pipeto(), which pipes a readable stream to a writer acting as an end point for the pipe chain.
... we have created an example called unpack chunks of a png (see it live also) that fetches an image as a stream, then pipes it through to a custom png transform stream that retrieves png chunks out of a binary data stream.
... // fetch the original image fetch('png-logo.png') // retrieve its body as readablestream .then(response => response.body) // create a gray-scaled png stream out of the original .then(rs => logreadablestream('fetch response stream', rs)) .then(body => body.pipethrough(new pngtransformstream())) .then(rs => logreadablestream('png chunk stream', rs)) summary that explains the basics of “default” readable streams.

WebGLRenderingContext.getProgramParameter() - Web APIs
when using a webgl 2 context, the following values are available additionally: gl.transform_feedback_buffer_mode: returns a glenum indicating the buffer mode when transform feedback is active.
... gl.transform_feedback_varyings: returns a glint indicating the number of varying variables to capture in transform feedback mode.
... editor's draft adds new pname values: gl.transform_feedback_buffer_mode, gl.transform_feedback_varyings, gl.active_uniform_blocks ...

WebGL: 2D and 3D graphics for the web - Web APIs
reference standard interfaces webglrenderingcontext webgl2renderingcontext webglactiveinfo webglbuffer webglcontextevent webglframebuffer webglprogram webglquery webglrenderbuffer webglsampler webglshader webglshaderprecisionformat webglsync webgltexture webgltransformfeedback webgluniformlocation webglvertexarrayobject extensions angle_instanced_arrays ext_blend_minmax ext_color_buffer_float ext_color_buffer_half_float ext_disjoint_timer_query ext_float_blend ext_frag_depth ext_srgb ext_shader_texture_lod ext_texture_compression_bptc ext_texture_compression_rgtc ext_texture_filter_anisotropic khr_parallel_shader_compile oes_element_inde...
...it is based on opengl es 3.0 and new features include: 3d textures, sampler objects, uniform buffer objects, sync objects, query objects, transform feedback objects, promoted extensions that are now core to webgl 2: vertex array objects, instancing, multiple render targets, fragment depth.
... matrix math for the web a useful guide to how 3d transform matrices work, and can be used on the web — both for webgl calculations and in css3 transforms.

Starting up and shutting down a WebXR session - Web APIs
ession, "worlddata.xml"); if (!worlddata) { return null; } // finish configuring webgl worlddata.session.updaterenderstate({ baselayer: new xrwebgllayer(worlddata.session, gl) }); // start rendering the scene referencespace = await worlddata.session.requestreferencespace("unbounded"); worlddata.referencespace = referencespace.getoffsetreferencespace( new xrrigidtransform(worlddata.playerspawnposition, worlddata.playerspawnorientation)); worlddata.animationframerequestid = worlddata.session.requestanimationframe(ondrawframe); return worlddata; } for the purposes of this example, an object named worlddata gets created to encapsulate data about the world and rendering environment.
...the input value into getoffsetreferencespace() is an xrrigidtransform encapsulating the player's position and orientation as specified in the default world coordinates.
...the event's transform property is an xrrigidtransform detailing the transform needed to realign the native origin.

XRPose - Web APIs
properties xrpose.transform read only a xrrigidtransform which provides the position and orientation of the pose relative to the base xrspace.
... xrpose.emulatedposition read only a boolean value which is false if the position and orientation given by transform is obtained directly from a full six degree of freedom (6dof) xr device (that is, a device which tracks not only the pitch, yaw, and roll of the head but also the forward, backward, and side-to-side motion of the viewer).
... if any component of the transform is computed or created artificially (such as by using mouse or keyboard controls to move through space), this value is instead true, indicating that the transform is in part emulated in software.

XRSession: selectend event - Web APIs
the mybegintracking() function would presumably start the presentation of the object-dragging process, using the transform to perform a hit test, determining which object to pick up.
... upon receiving a select event, the mydropobject() function is called with the target object and the current target ray pose transform as inputs.
... the selectend event results in a mystoptracking() function being called with the object being dragged and the final target ray pose's transform.

XRSession: selectstart event - Web APIs
the mybegintracking() function would presumably start the presentation of the object-dragging process, using the transform to perform a hit test, determining which object to pick up.
... upon receiving a select event, the mydropobject() function is called with the target object and the current target ray pose transform as inputs.
... the selectend event results in a mystoptracking() function being called with the object being dragged and the final target ray pose's transform.

XRSession: squeeze event - Web APIs
the handler fetches the pose representing the target ray for tracked-pointer inputs and sends the pose's transform to a function called myhandlesqueezewithray().
... xrsession.addeventlistener("squeeze", event => { if (event.inputsource.targetraymode == "tracked-pointer") { let targetraypose = event.frame.getpose(event.inputsource.targetrayspace, myrefspace); if (targetraypose) { myhandlesqueezewithray(targetraypose.transform); } } }); you can of course also set up a handler for squeeze events by setting the xrsession object's onsqueeze event handler property to a function that handles the event: xrsession.onsqueeze = event => { if (event.inputsource.targetraymode == "tracked-pointer") { let targetraypose = event.frame.getpose(event.inputsource.targetrayspace, myrefspace); ...
... if (targetraypose) { myhandlesqueezewithray(targetraypose.transform); } } }; specifications specification status comment webxr device apithe definition of 'squeeze event' in that specification.

XRSession: squeezeend event - Web APIs
the mybegintracking() function would presumably start the presentation of the object-dragging process, using the transform to perform a hit test, determining which object to pick up.
... upon receiving a squeeze event, the mydropobject() function is called with the target object and the current target ray pose transform as inputs.
... the squeezeend event results in a mystoptracking() function being called with the object being dragged and the final target ray pose's transform.

XRSession: squeezestart event - Web APIs
the mybegintracking() function would presumably start the presentation of the object-dragging process, using the transform to perform a hit test, determining which object to pick up.
... upon receiving a squeeze event, the mydropobject() function is called with the target object and the current target ray pose transform as inputs.
... the squeezeend event results in a mystoptracking() function being called with the object being dragged and the final target ray pose's transform.

Layout and the containing block - CSS: Cascading Style Sheets
if the position property is absolute or fixed, the containing block may also be formed by the edge of the padding box of the nearest ancestor element that has the following: a transform or perspective value other than none a will-change value of transform or perspective a filter value other than none or a will-change value of filter (only works on firefox).
...0vw - (width of vertical scrollbar)) */ height: 50%; /* == (50vh - (height of horizontal scrollbar)) */ margin: 5%; /* == (5vw - (width of vertical scrollbar)) */ padding: 5%; /* == (5vw - (width of vertical scrollbar)) */ background: cyan; } example 5 in this example, the paragraph's position is absolute, so its containing block is <section>, which is the nearest ancestor with a transform property that isn't none.
... <body> <section> <p>this is a paragraph!</p> </section> </body> body { background: beige; } section { transform: rotate(0deg); width: 400px; height: 160px; background: lightgray; } p { position: absolute; left: 80px; top: 30px; width: 50%; /* == 200px */ height: 25%; /* == 40px */ margin: 5%; /* == 20px */ padding: 5%; /* == 20px */ background: cyan; } ...

Linear-gradient Generator - CSS: Cascading Style Sheets
-serif; -moz-user-select: none; user-select: none; } .ui-input-slider * { float: left; height: 100%; } /* input slider */ .ui-input-slider > input { margin: 0; padding: 0; width: 50px; text-align: center; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .ui-input-slider-info { width: 90px; padding: 0px 10px 0px 0px; text-align: right; text-transform: lowercase; line-height: inherit; } .ui-input-slider-left, .ui-input-slider-right { width: 16px; cursor: pointer; background: url("arrows.png") center left no-repeat; } .ui-input-slider-right { background: url("arrows.png") center right no-repeat; } .ui-input-slider-name { width: 90px; padding: 0 10px 0 0; text-align: right; text-transform: lowercase; } .ui-input-slider-btn-set { wi...
...elect: none; user-select: none; } .ui-slider > * { float: left; height: 100%; line-height: 100%; } /* slider */ .ui-slider-slider { height: 10px; width: 200px; margin: 4px 10px; display: block; border: 1px solid #999; border-radius: 3px; background: #eee; } .ui-slider-slider:hover { cursor: pointer; } .ui-slider-name { width: 90px; padding: 0 10px 0 0; text-align: right; text-transform: lowercase; } .ui-slider-pointer { width: 12px; height: 13px; margin: 0 0 0 -7px; background-color: #eee; border: 1px solid #2c9fc9; border-radius: 3px; position: relative; top: -3px; left: 0%; } .ui-slider-button { width: 25px; background-color: #2c9fc9; border-radius: 3px; color: #fff; font-weight: bold; line-height: 14px; text-align: center; } .ui-slider-button:hover { back...
...r px = math.cos(rad); var py = math.sin(rad); this.lsize = this.mw * math.abs(px) + this.mh * math.abs(py); this.angle = deg; this.updatecss(); axesmanager.updatecssgradient(); this.px = px; this.py = py; this.pmod = 1; }; /* ui methods - apply css */ gradientaxis.prototype.updatecss = function updatecss() { this.line.style.width = 2 * this.lsize + 'px'; this.axis.style.transform = 'rotate('+ -this.angle +'deg)'; this.axis.style.webkittransform = 'rotate('+ -this.angle +'deg)'; }; gradientaxis.prototype.updategradient = function updategradient() { var p = this.firstpoint; if (p === null) return; this.gradient = p.cssvalue; p = p.nextpoint; while(p) { this.gradient += ', ' + p.cssvalue; p = p.nextpoint; }; axesmanager.updatecssgradient(); }; ...

animation - CSS: Cascading Style Sheets
unt | direction | fill-mode | play-state | name */ animation: 3s ease-in 1s 2 reverse both paused slidein; /* @keyframes name | duration | timing-function | delay */ animation: 3s linear 1s slidein; /* @keyframes name | duration */ animation: slidein 3s; <div class="grid"> <div class="col"> <div class="note"> given the following animation: <pre>@keyframes slidein { from { transform: scalex(0); } to { transform: scalex(1); } }</pre> </div> <div class="row"> <div class="cell"> <button class="play" title="play"></button> </div> <div class="cell flx"> <div class="overlay">animation: 3s ease-in 1s 2 reverse both paused slidein;</div> <div class="animation a1"></div> </div> </div> <div class="row"> <div cla...
...display: flex; flex: 1 auto; flex-direction: column; } .cell { box-sizing: border-box; margin: .5em; padding: 0; background-color: #fff; overflow: hidden; text-align: left; } .flx { flex: 1 0; } .note { background: #fff3d4; padding: 1em; margin: .5em; font: .8em sans-serif; text-align: left; flex: none; } .overlay { padding: .5em; } @keyframes slidein { from { transform: scalex(0); } to { transform: scalex(1); } } .a1 { animation: 3s ease-in 1s 2 reverse both paused slidein; } .a2 { animation: 3s linear 1s slidein; } .a3 { animation: 3s slidein; } .animation { background: #3f87a6; width: 100%; height: calc(100% - 1.5em); transform-origin: left center; } window.addeventlistener('load', function () { var animation = array.from(document.queryselector...
...rnate-reverse<single-animation-fill-mode> = none | forwards | backwards | both<single-animation-play-state> = running | paused<keyframes-name> = <custom-ident> | <string>where <cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number <a href="/docs/css/value_definition_syntax#brackets" title="brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[0,1]>, <number>, <number <a href="/docs/css/value_definition_syntax#brackets" title="brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[0,1]>, <number>)<step-timing-function> = step-start | step-end | steps(<integer>[, <step-position>]?)where <step-position> = jump-start | jump-end | jump-none | jump-both | start...

image-orientation - CSS: Cascading Style Sheets
it should not be used for any other orientation adjustments; instead, the transform property should be used with the rotate <transform-function>.
...for any purpose other than correcting an image's orientation due to how it was shot or scanned, use a transform property with the rotate keyword to specify rotation.
... if used in conjunction with other css properties, such as a <transform-function>, any image-orientation rotation is applied before any other transformations.

position - CSS: Cascading Style Sheets
it is positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a transform, perspective, or filter property set to something other than none (see the css transforms spec), in which case that ancestor behaves as the containing block.
...one solution is to add will-change: transform to the positioned elements to render the element in its own layer, improving repaint speed and therefore improving performance and accessibility.
...adding: 10px; margin: 10px; } span { background: red; border: 1px solid black; } .positioned { position: absolute; background: yellow; top: 30px; left: 30px; } result fixed positioning fixed positioning is similar to absolute positioning, with the exception that the element's containing block is the initial containing block established by the viewport, unless any ancestor has transform, perspective, or filter property set to something other than none (see css transforms spec), which then causes that ancestor to take the place of the elements containing block.

Cache-Control - HTTP
cache-control: max-age=<seconds> cache-control: max-stale[=<seconds>] cache-control: min-fresh=<seconds> cache-control: no-cache cache-control: no-store cache-control: no-transform cache-control: only-if-cached cache response directives standard cache-control directives that can be used by the server in an http response.
... cache-control: must-revalidate cache-control: no-cache cache-control: no-store cache-control: no-transform cache-control: public cache-control: private cache-control: proxy-revalidate cache-control: max-age=<seconds> cache-control: s-maxage=<seconds> extension cache-control directives extension cache-control directives are not part of the core http caching standards document.
... other no-transform an intermediate cache or proxy cannot edit the response body, content-encoding, content-range, or content-type.

Lexical grammar - JavaScript
{ 1 2 } 3 // is transformed by asi into { 1 2 ;} 3; 2.
... a = b ++c // is transformend by asi into a = b; ++c; 3.
...these statements with "no lineterminator here" rules are: postfixexpressions (++ and --) continue break return yield, yield* module return a + b // is transformed by asi into return; a + b; specifications specification ecmascript (ecma-262)the definition of 'lexical grammar' in that specification.

CSS and JavaScript animation performance - Web Performance
running the performance test initially in the test seen below, a total of 1000 <div> elements are transformed by css animation.
...the most common property is the css transform.
... if an element is promoted as a layer, animating transform properties can be done in the gpu, meaning better performance/efficiency, especially on mobile.

SVG Presentation Attributes - SVG: Scalable Vector Graphics
entation-vertical image-rendering kerning letter-spacing lighting-color marker-end marker-mid marker-start mask opacity overflow pointer-events shape-rendering solid-color solid-opacity stop-color stop-opacity stroke stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-width text-anchor text-decoration text-rendering transform unicode-bidi vector-effect visibility word-spacing writing-mode attributes alignment-baseline it specifies how an object is aligned along the font baseline with respect to its parent.
... value: auto|optimizespeed|optimizelegibility|geometricprecision|inherit; animatable: yes transform defines a list of transform definitions that are applied to an element and the element's children.
... value: <transform-list>; animatable: yes unicode-bidi - value:; animatable: - vector-effect specifies the vector effect to use when drawing an object.

fill - SVG: Scalable Vector Graphics
for animation five elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, <animatetransform>, and <set>.
... value freeze (keep the state of the last animation frame) | remove (keep the state of the first animation frame) default value remove animatable no animatetransform for <animatetransform>, fill defines the final state of the animation.
... specifications specification status comment svg animations level 2the definition of 'transform' in that specification.

href - SVG: Scalable Vector Graphics
fifteen elements are using this attribute: <a>, <animate>, <animatemotion>, <animatetransform>, <discard>, <feimage>, <image>, <lineargradient>, <mpath>, <pattern>, <radialgradient>, <script>, <set>, <textpath>, and <use> html, body, svg { height: 100%; } <svg viewbox="0 0 160 40" xmlns="http://www.w3.org/2000/svg"> <a href="https://developer.mozilla.org/"><text x="10" y="25">mdn web docs</text></a> </svg> in svg a for <a>, href defines the location of the referenced object, expressed as a url reference.
... value <url> default value none animatable yes animate, animatemotion, animatetransform, set for the <animate>, <animatemotion>, <animatetransform>, and <set>, href defines a url referring to the element which is the target of this animation element and which therefore will be modified over time.
... svg animations level 2the definition of 'href for <animate>, <animatemotion>, <animatetransform>, and <set>' in that specification.

type - SVG: Scalable Vector Graphics
for the <animatetransform> element, it defines the type of transformation, whose values change over time.
... usage context for the <animatetransform> elements categories none value translate | scale | rotate | skewx | skewy animatable no normative document svg 1.1 (2nd edition) for the <fecolormatrix> element categories none value matrix | saturate | huerotate | luminancetoalpha animatable yes normative document svg 1.1 (2nd edition) ...
...e animatable yes normative document svg 1.1 (2nd edition) for the <style> and <script> elements categories none value <content-type> animatable no normative document svg 1.1 (2nd edition) : script svg 1.1 (2nd edition) : style example elements the following elements can use the values attribute <animatetransform> <fecolormatrix> <fefunca> <fefuncb> <fefuncg> <fefuncr> <feturbulence> <script> <style> ...

xlink:href - SVG: Scalable Vector Graphics
22 elements are using this attribute: <a>, <altglyph>, <animate>, <animatecolor>, <animatemotion>, <animatetransform>, <color-profile>, <cursor>, <feimage>, <filter>, <font-face-uri>, <glyphref>, <image>, <lineargradient>, <mpath>, <pattern>, <radialgradient>, <script>, <set>, <textpath>, <tref>, and <use>} html, body, svg { height: 100%; } <svg viewbox="0 0 160 40" xmlns="http://www.w3.org/2000/svg"> <a xlink:href="https://developer.mozilla.org/"><text x="10" y="25">mdn web docs</text></a> </svg> a for <a>, xlink:href defin...
... value <iri> default value none animatable no animate, animatecolor, animatemotion, animatetransform, set for <animate>, <animatecolor>, <animatemotion>, <animatetransform>, and <set>, xlink:href defines the reference to the element which is the target of this animation and which therefore will be modified over time.
... scalable vector graphics (svg) 1.1 (second edition)the definition of 'href for <animate>, <animatecolor>, <animatemotion>, <animatetransform>, and <set>' in that specification.

Content type - SVG: Scalable Vector Graphics
the time unit identifiers are: ms: milliseconds s: seconds transform-list <transform-list> a <transform-list> is used to specify a list of coordinate system transformations.
... a detailed description of the possible values for a <transform-list> is given in the transform attribute definition.
... within the svg dom, a <transform-list> value is represented using an svgtransformlist or svganimatedtransformlist object.

<pattern> - SVG: Scalable Vector Graphics
patterntransform this attribute contains the definition of an optional additional transformation from the pattern coordinate system onto the target coordinate system.
... value type: <transform-list>; default value: none; animatable: yes patternunits this attribute defines the coordinate system for attributes x, y, width , and height.
... attributes most notably: requiredextensions, systemlanguage presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility xlink attributes most notably: xlink:title usage notes categoriescontainer elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <ma...

<radialGradient> - SVG: Scalable Vector Graphics
value type: <length> ; default value: same as cy; animatable: yes gradientunits this attribute defines the coordinate system for attributes x1, x2, y1, y2 value type: userspaceonuse|objectboundingbox ; default value: objectboundingbox; animatable: yes gradienttransform this attribute provides additional transformation to the gradient coordinate system.
... value type: <transform-list> ; default value: identity transform; animatable: yes href this attribute defines a reference to another <lineargradient> element that will be used as a template.
...s global event attributes, document element event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility xlink attributes xlink:href, xlink:title usage notes categoriesgradient elementpermitted contentany number of the following elements, in any order:descriptive elements<animate>, <animatetransform>, <set>, <stop> specifications specification status comment scalable vector graphics (svg) 2the definition of '<radialgradient>' in that spec...

SVG animation with SMIL - SVG: Scalable Vector Graphics
smil allows you to: animate the numeric attributes of an element (x, y, ...) animate transform attributes (translation or rotation) animate color attributes follow a motion path this is done adding an svg element like <animate> inside the svg element to animate.
... <svg width="300" height="100"> <title>attribute animation with smil</title> <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" /> <circle cx="0" cy="50" r="15" fill="blue" stroke="black" stroke-width="1"> <animate attributename="cx" from="0" to="500" dur="5s" repeatcount="indefinite" /> </circle> </svg> animating the transform attributes the <animatetransform> element let you animate transform attributes.
... <svg width="300" height="100"> <title>svg smil animate with transform</title> <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" /> <rect x="0" y="50" width="15" height="34" fill="blue" stroke="black" stroke-width="1"> <animatetransform attributename="transform" begin="0s" dur="20s" type="rotate" from="0 60 60" to="360 100 60" repeatcount="indefinite" /> </rect> </svg> animation following a path ...

Index - XPath
2 axes transforming_xml_with_xslt, xpath, xpath_reference, xslt, xslt_reference for further information on using xpath expressions, please see the for further reading section at the end of transforming xml with xslt document.
... 17 functions transforming_xml_with_xslt, xpath, xpath_reference, xslt, xslt_reference no summary!
... 55 index index, reference, xpath, xslt found 57 pages: 56 introduction to using xpath in javascript add-ons, dom, extensions, javascript, transforming_xml_with_xslt, web development, xml, xpath, xslt this document describes the interface for using xpath in javascript internally, in extensions, and from websites.

places/bookmarks - Archive of obsolete content
}); }) parameters items : bookmark|group|separator|array a bookmark item, or array of bookmark items to be transformed to set their remove property to true.
... returns array : an array of the transformed bookmark items.

Canvas code snippets - Archive of obsolete content
x = canvas.getcontext('2d'); if (!canvas2dcontext.prototype.arc) { canvas2dcontext.setup.call(this, this.ctx); } } canvas2dcontext.setup = function() { var methods = ['arc', 'arcto', 'beginpath', 'beziercurveto', 'clearrect', 'clip', 'closepath', 'drawimage', 'fill', 'fillrect', 'filltext', 'lineto', 'moveto', 'quadraticcurveto', 'rect', 'restore', 'rotate', 'save', 'scale', 'settransform', 'stroke', 'strokerect', 'stroketext', 'transform', 'translate']; var gettermethods = ['createpattern', 'drawfocusring', 'ispointinpath', 'measuretext', // drawfocusring not currently supported // the following might instead be wrapped to be able to chain their child objects 'createimagedata', 'createlineargradient', 'createradialgradient', 'getimagedata', 'putimagedata' ]; ...
... for (let p of props) { let prop = p; canvas2dcontext.prototype[prop] = function(value) { if (value === undefined) return this.ctx[prop]; this.ctx[prop] = value; return this; }; } }; var canvas = document.getelementbyid('canvas'); // use context to get access to underlying context var ctx = canvas2dcontext(canvas) .strokestyle('rgb(30, 110, 210)') .transform(10, 3, 4, 5, 1, 0) .strokerect(2, 10, 15, 20) .context; // use property name as a function (but without arguments) to get the value var strokestyle = canvas2dcontext(canvas) .strokestyle('rgb(50, 110, 210)') .strokestyle(); code usable only from privileged code these snippets are only useful from privileged code, such as extensions or privileged apps.

Index of archived content - Archive of obsolete content
introduction kill the xul.mfl file for good locked config settings other mozilla customization pages protecting mozilla's registry.dat file automatically handle failed asserts in debug builds blackconnect blackwood bonsai bookmark keywords build building transformiix standalone chromeless compiling the npruntime sample plugin in visual studio creating a firefox sidebar extension creating a microsummary creating a mozilla extension adding the structure conclusion enabling the behavior - retrieving tinderbox status enabling the behavior -...
... releases tamarin-central rev 703:2cee46be9ce0 tamarin roadmap tamarin build documentation tamarin mercurial commit hook the download manager schema the life of an html http request the new nsstring class implementation (1999) tracevis transforming xml with xslt:mozilla xslt transforming xml with xslt:the netscape xslt treehydra treehydra build instructions treehydra manual tuning pageload urischeme uris and urls uriloader using addresses of stack variables with nspr threads on win16 using...

Proposal - Archive of obsolete content
and lets you specifies a specific rendering transform (xslt) to be used when rendering the feed in newsgator for outlook.
... the transform must already exist on the machine running newsgator; stylesheets will not be downloaded or installed automatically.

Encryption and Decryption - Archive of obsolete content
encryption is the process of transforming information so it is unintelligible to anyone but the intended recipient.
... decryption is the process of transforming encrypted information so that it is intelligible again.

Security - Archive of obsolete content
but encryption and decryption, by themselves, do not address another problem: tampering.encryption and decryptionencryption is the process of transforming information so it is unintelligible to anyone but the intended recipient.
... decryption is the process of transforming encrypted information so that it is intelligible again.introduction to public-key cryptographypublic-key cryptography and related standards and techniques underlie the security features of many products such as signed and encrypted email, single sign-on, and secure sockets layer (ssl) communications.

Browser Feature Detection - Archive of obsolete content
left true true true padding true true true paddingtop true true true paddingright true true true paddingbottom true true true paddingleft true true true textalign true true true textdecoration true true true textindent true true true texttransform true true true verticalalign true true true whitespace true true true width true true true wordspacing true true true dom css 2 support for properties/methods in document.body.style</caption> name firefox 1.5 ie 6 & 7 opera 8.54 - 9.01 azimuth true false false bac...
...left', 'supported': false}, {name: 'padding', 'supported': false}, {name: 'paddingtop', 'supported': false}, {name: 'paddingright', 'supported': false}, {name: 'paddingbottom', 'supported': false}, {name: 'paddingleft', 'supported': false}, {name: 'textalign', 'supported': false}, {name: 'textdecoration', 'supported': false}, {name: 'textindent', 'supported': false}, {name: 'texttransform', 'supported': false}, {name: 'verticalalign', 'supported': false}, {name: 'whitespace', 'supported': false}, {name: 'width', 'supported': false}, {name: 'wordspacing', 'supported': false} ], 'domcss2': [ {name: 'azimuth', 'supported': false}, {name: 'backgroundposition', 'supported': false}, {name: 'bordercollapse', 'supported': false}, {name: 'borderspacing', 'supported': fa...

The Business Benefits of Web Standards - Archive of obsolete content
according to various reports, case studies, and andy king, author of speed up your web site: web site optimization, css has made it possible to transform table-based layouts into css-based layouts.
... using xhtml is a way to enter a set of standards composed of xml-based technologies, such as xml, xslt (transforming data), svg (animated graphics), mathml (describing mathematic expressions)...

GLSL Shaders - Game development
vertex shaders transform shape positions into 3d drawing coordinates.
... note: you can learn more about model, view, and projection transformations from the vertex processing paragraph, and you can also check out the links at the end of this article to learn more about it.

Efficient animation for web games - Game development
in this vein, it is worth trying to stick to animating only transform and opacity properties.
...if you are setting a transform on something that would overlap its container’s bounds, you may want to set overflow: hidden on that container for the duration of the animation.

Compile - MDN Web Docs Glossary: Definitions of Web-related terms
compiling is the process of transforming a computer program written in a given language into an equivalent program of another language.
... usually, a compiler transforms a higher-level language such as c or java, which humans understand, into a machine language, such as assembly, that the cpu can understand.

JPEG - MDN Web Docs Glossary: Definitions of Web-related terms
jpeg compression is composed of three compression techniques applied in successive layers, including chrominance subsampling, discrete cosine transformation and quantization, and run-length delta & huffman encoding.
...a discrete cosine transform expresses a finite sequence of data points in terms of a sum of cosine functions oscillating at different frequencies.

Index - Learn web development
302 understanding client-side web development tools beginner, css, deployment, html, javascript, learn, tools, transformation, client-side, linting client-side tooling can be intimidating, but this series of articles aims to illustrate the purpose of some of the most common client-side tool types, explain the tools you can chain together, how to install them using package managers, and control them using the command line.
... 306 introducing a complete toolchain beginner, complete toolchain, development environment, learn, tools, transformation, case study we've come a long way in this chapter, building up a rather nice local development environment to create an application in.

Graceful asynchronous programming with Promises - Learn web development
in the first example, we'll use the fetch() method to fetch an image from the web, the blob() method to transform the fetch response's raw body contents into a blob object, and then display that blob inside an <img> element.
... we immediately run the blob() method on this response to ensure that the response body is fully downloaded, and when it is available transform it into a blob object that we can do something with.

Cooperative asynchronous JavaScript: Timeouts and intervals - Learn web development
if (rotatecount > 359) { rotatecount %= 360; } next, below the previous block add the following line to actually rotate the spinner: spinner.style.transform = `rotate(${rotatecount}deg)`; at the very bottom inside the draw() function, insert the following line.
...this is very similar to the version from the simple spinner example, earlier: function draw(timestamp) { if(!starttime) { starttime = timestamp; } rotatecount = (timestamp - starttime) / 3; if(rotatecount > 359) { rotatecount %= 360; } spinner.style.transform = 'rotate(' + rotatecount + 'deg)'; raf = requestanimationframe(draw); } now it is time to set up the initial state of the app when the page first loads.

Ember resources and troubleshooting - Learn web development
it could be thought of as a build-time transform that wraps its argument with a setter function.
...both of these try to solve the problems of mut by introducing more obvious / "less magic" concepts, avoiding build-time transforms and implicit glimmer vm behavior.

Framework main features - Learn web development
dsls can't be read by the browser directly; they must be transformed into javascript or html first.
... transformation is an extra step in the development process, but framework tooling generally includes the required tools to handle this step, or can be adjusted to include this step.

Componentizing our React app - Learn web development
javascript gives us an array method for transforming data into something else: array.prototype.map().
... above the return statement of app(), make a new const called tasklist and use map() to transform it.

Beginning our React todo list - Learn web development
: 1.6rem/1.25 arial, sans-serif; background-color: #f5f5f5; color: #4d4d4d; } @media screen and (min-width: 620px) { body { font-size: 1.9rem; line-height: 1.31579; } } /*end resets*/ /* global styles */ .form-group > input[type="text"] { display: inline-block; margin-top: 0.4rem; } .btn { padding: 0.8rem 1rem 0.7rem; border: 0.2rem solid #4d4d4d; cursor: pointer; text-transform: capitalize; } .btn.toggle-btn { border-width: 1px; border-color: #d3d3d3; } .btn.toggle-btn[aria-pressed="true"] { text-decoration: underline; border-color: #4d4d4d; } .btn__danger { color: #fff; background-color: #ca3c3c; border-color: #bd2130; } .btn__filter { border-color: lightgrey; } .btn__primary { color: #fff; background-color: #000; } .btn-group { display: flex; j...
...tion: manipulation; } .c-cb > label::before { content: ""; position: absolute; border: 2px solid currentcolor; background: transparent; } .c-cb > input[type="checkbox"]:focus + label::before { border-width: 4px; outline: 3px dashed #228bec; } .c-cb > label::after { box-sizing: content-box; content: ""; position: absolute; top: 11px; left: 9px; width: 18px; height: 7px; transform: rotate(-45deg); border: solid; border-width: 0 0 5px 5px; border-top-color: transparent; opacity: 0; background: transparent; } .c-cb > input[type="checkbox"]:checked + label::after { opacity: 1; } save and look back at your browser, and your app should now have reasonable styling.

Starting our Svelte Todo list app - Learn web development
1.6rem/1.25 arial, sans-serif; background-color: #f5f5f5; color: #4d4d4d; } @media screen and (min-width: 620px) { body { font-size: 1.9rem; line-height: 1.31579; } } /*end resets*/ /* global styles */ .form-group > input[type="text"] { display: inline-block; margin-top: 0.4rem; } .btn { padding: 0.8rem 1rem 0.7rem; border: 0.2rem solid #4d4d4d; cursor: pointer; text-transform: capitalize; } .btn.toggle-btn { border-width: 1px; border-color: #d3d3d3; } .btn.toggle-btn[aria-pressed="true"] { text-decoration: underline; border-color: #4d4d4d; } .btn__danger { color: #fff; background-color: #ca3c3c; border-color: #bd2130; } .btn__filter { border-color: lightgrey; } .btn__primary { color: #fff; background-color: #000; } .btn__primary:disabled { color:...
...tion: manipulation; } .c-cb > label::before { content: ""; position: absolute; border: 2px solid currentcolor; background: transparent; } .c-cb > input[type="checkbox"]:focus + label::before { border-width: 4px; outline: 3px dashed #228bec; } .c-cb > label::after { box-sizing: content-box; content: ""; position: absolute; top: 11px; left: 9px; width: 18px; height: 7px; transform: rotate(-45deg); border: solid; border-width: 0 0 5px 5px; border-top-color: transparent; opacity: 0; background: transparent; } .c-cb > input[type="checkbox"]:checked + label::after { opacity: 1; } with our markup styled, everything now looks better: the code so far git to see the state of the code as it should be at the end of this article, access your copy of our repo like th...

Getting started with Svelte - Learn web development
you should see something like the following: <script> export let name; </script> <main> <h1>hello {name}!</h1> <p>visit the <a href="https://svelte.dev/tutorial">svelte tutorial</a> to learn how to build svelte apps.</p> </main> <style> main { text-align: center; padding: 1em; max-width: 240px; margin: 0 auto; } h1 { color: #ff3e00; text-transform: uppercase; font-size: 4em; font-weight: 100; } @media (min-width: 640px) { main { max-width: none; } } </style> the <script> section the <script> block contains javascript that runs when a component instance is created.
... the <style> section if you have experience working with css, the following snippet should make sense: <style> main { text-align: center; padding: 1em; max-width: 240px; margin: 0 auto; } h1 { color: #ff3e00; text-transform: uppercase; font-size: 4em; font-weight: 100; } @media (min-width: 640px) { main { max-width: none; } } </style> we are applying a style to our <h1> element.

Getting started with Vue - Learn web development
babel.config.js: this is the config file for babel, which transforms modern javascript features being used in development code into older syntax that is more cross-browser compatible in production code.
...your build step will process this object and transform it (with your template) into a vue component with a render() function.

Styling Vue components with CSS - Learn web development
update your app.vue file’s <style> element so it looks like so: <style> /* global styles */ .btn { padding: 0.8rem 1rem 0.7rem; border: 0.2rem solid #4d4d4d; cursor: pointer; text-transform: capitalize; } .btn__danger { color: #fff; background-color: #ca3c3c; border-color: #bd2130; } .btn__filter { border-color: lightgrey; } .btn__danger:focus { outline-color: #c82333; } .btn__primary { color: #fff; background-color: #000; } .btn-group { display: flex; justify-content: space-between; } .btn-group > * { flex: 1 1 auto; } .btn-group > * + * { margin-left: 0.8rem;...
...bsolute; top: 0; left: 0; width: 40px; height: 40px; border: 2px solid currentcolor; background: transparent; } .custom-checkbox > input[type="checkbox"]:focus + label::before { border-width: 4px; outline: 3px dashed #228bec; } .custom-checkbox > label::after { box-sizing: content-box; content: ""; position: absolute; top: 11px; left: 9px; width: 18px; height: 7px; transform: rotate(-45deg); border: solid; border-width: 0 0 5px 5px; border-top-color: transparent; opacity: 0; background: transparent; } .custom-checkbox > input[type="checkbox"]:checked + label::after { opacity: 1; } @media only screen and (min-width: 40rem) { label, input, .custom-checkbox { font-size: 19px; font-size: 1.9rem; line-height: 1.31579; } } now we need to ad...

Handling common JavaScript problems - Learn web development
paragraph.style.transform !== undefined).
... note: this is called "transpiling" — you are not compiling code into a lower level to be run on a computer (like you would say with c code); instead, you are changing it into a syntax that exists at a similar level of abstraction so it can be used in the same way, but in slightly different circumstances (in this case, transforming one flavor of javascript into another).

Command line crash course - Learn web development
py, rename and delete: move around your directory structure: cd create directories: mkdir create files (and modify their metadata): touch copy files: cp move files: mv delete files or directories: rm download files found at specific urls: curl search for fragments of text inside larger bodies of text: grep view a file's contents page by page: less, cat manipulate and transform streams of text (for example changing all the instances of <div>s in an html file to <article>): awk, tr, sed note: there are a number of good tutorials on the web that go much deeper into the command line on the web — this is only a brief introduction!
...ocs/web/api/fetch -l -i | grep location your output should look something like this (curl will first output some download counters and suchlike): location: /docs/web/api/fetch location: /docs/web/api/globalfetch/globalfetch.fetch() location: /docs/web/api/globalfetch/fetch location: /docs/web/api/windoworworkerglobalscope/fetch although contrived, we could take this result a little further and transform the location: line contents, adding the base origin to the start of each one so that we get complete urls printed out.

Understanding client-side web development tools - Learn web development
we'll go all the way from setting up a sensible development environment and putting transformation tools in place to actually deploying your app on netlify.
... in this article we'll introduce the case study, set up our development environment, and set up our code transformation tools.

Adding a new CSS property
(note that when the longhand property css_property_parse_value_list, the shorthand property parser would be assumed to be reusing the longhand parser once per item, not for a whole list, as for properties like background-image or transform-timing-function.) if the property takes a list of keywords other than inherit/initial/etc., auto, none, or normal (which can be expressed using the variant_* flags), you should use variant_keyword and add a keyword table to the nscssprops class.
... you then need to add code to nsrulenode::compute*data (where the * is for the style struct) to transform a specified value of the property into a computed value of the property.

Localization content best practices
the text-transform property is not reliable for some locales; for example, text-transform: uppercase won't work properly with languages such as irish/gaelic.
... for example, app size in english may be capitalized via text-transform: uppercase to app size but in gaelic this would change meud na h-aplacaid to meud na h-aplacaid which violates the locales orthographic rules, as it ought to be meud na haplacaid.

Reference Manual
this often happens with getters that return the addrefed pointer as their result (rather than an nsresult); or in the efficiency transformations.
...a slight transformation makes the code uglier, but (possibly negligibly) more efficient.

AudioWorkletProcessor.process - Web APIs
a node that transforms its input.
... a node that transforms its input, but has a so-called tail-time — this means that it will produce an output for some time even after its inputs are disconnected or are inactive (producing zero-channels).

CSSStyleValue.parse() - Web APIs
example the code below parses a set of declarations for the transform property.
... const css = cssstylevalue.parse( 'transform', 'translate3d(10px,10px,0) scale(0.5)'); csstransformvalue {0: csstranslate, 1: cssscale, length: 2, is2d: false} specifications specification status comment css typed om level 1the definition of 'parse()' in that specification.

CSS Typed Object Model API - Web APIs
csstransformvalue an interface representing a list of transform list values.
... they "contain" one or more csstransformcomponents, which represent individual transform function values.

CanvasPattern - Web APIs
canvaspattern.settransform() applies an svgmatrix or dommatrix representing a linear transform to the pattern.
... living standard added settransform() method in v5.

CanvasRenderingContext2D.isPointInPath() - Web APIs
syntax ctx.ispointinpath(x, y [, fillrule]); ctx.ispointinpath(path, x, y [, fillrule]); parameters x the x-axis coordinate of the point to check, unaffected by the current transformation of the context.
... y the y-axis coordinate of the point to check, unaffected by the current transformation of the context.

Optimizing canvas - Web APIs
scaling canvas using css transforms css transforms are faster since they use the gpu.
... var scalex = window.innerwidth / canvas.width; var scaley = window.innerheight / canvas.height; var scaletofit = math.min(scalex, scaley); var scaletocover = math.max(scalex, scaley); stage.style.transformorigin = '0 0'; //scale from top left stage.style.transform = 'scale(' + scaletofit + ')'; turn off transparency if your application uses canvas and doesn’t need a transparent backdrop, set the alpha option to false when creating a drawing context with htmlcanvaselement.getcontext().

DOMMatrixReadOnly.translate() - Web APIs
examples this svg contains two squares, one red and one blue, each positioned at the document origin: <svg width="250" height="250" viewbox="0 0 50 50"> <rect width="25" height="25" fill="red" /> <rect id="transformed" width="25" height="25" fill="blue" /> </svg> the following javascript first creates an identity matrix, then uses the translate() method to create a new, translated matrix — which is then applied to the blue square as a transform.
... const matrix = new dommatrixreadonly().translate(25, 25); document.queryselector('#transformed').setattribute('transform', matrix.tostring()); screenshotlive sample specifications specification status comment geometry interfaces module level 1the definition of 'dommatrixreadonly.translate()' in that specification.

DOMPoint - Web APIs
in the following snippet, the pose of the xr device (such as a vr headset or phone with ar capabilities) can be retrieved by calling using xrframe.getviewerpose() during an xrsession animation frame, then accessing the resulting xrpose's transform property, which contains two dompointreadonly attributes: position as a vector and orientation as a quaternion.
... function onxrframe(time, xrframe) { let viewerpose = xrframe.getviewerpose(xrreferencespace); if (viewerpose) { let position = viewerpose.transform.position; let orientation = viewerpose.transform.orientation; console.log('xr viewer position: {x: ' + roundtotwo(position.x) + ', y: ' + roundtotwo(position.y) + ', z: ' + roundtotwo(position.z)); console.log('xr viewer orientation: {x: ' + roundtotwo(orientation.x) + ', y: ' + roundtotwo(orientation.y) + ', z: ' + roundtotwo(orientation.z) + ', w: ' + roundtotwo(orientation.w)); } } specifications specification status comment ...

DOMPointInit - Web APIs
this is the vertical coordinate, and barring any transforms applied to the coordinate system, positive values are downward and negative values upward toward the top of the screen.
... dompointinit.z an unrestricted floating-point value which gives the point's z-coordinate, which is (assuming no transformations that alter the situation) the depth coordinate; positive values are closer to the user and negative values retreat back into the screen.

Document.lastModified - Web APIs
alert(document.lastmodified); // returns: tuesday, december 16, 2017 11:09:42 transforming lastmodified into a date object this example transforms lastmodified into a date object.
... let olastmodif = new date(document.lastmodified); transforming lastmodified into milliseconds this example transforms lastmodified into the number of milliseconds since january 1, 1970, 00:00:00, local time.

How to create a DOM tree - Web APIs
dom trees can be queried using xpath expressions, converted to strings or written to a local or remote files using xmlserializer (without having to first convert to a string), posted to a web server (via xmlhttprequest), transformed using xslt, xlink, converted to a javascript object through a jxon algorithm, etc.
...another application is that, since xul is xml, the ui of your application can be dynamically manipulated, downloaded, uploaded, saved, loaded, converted, or transformed quite easily.

KeyboardEvent.code - Web APIs
ngle * (math.pi/180); position.x += (math.sin(rad) * offset); position.y -= (math.cos(rad) * offset); if (position.x < 0) { position.x = 399; } else if (position.x > 399) { position.x = 0; } if (position.y < 0) { position.y = 399; } else if (position.y > 399) { position.y = 0; } } the refresh() function handles applying the rotation and position by using an svg transform.
... function refresh() { let x = position.x - (shipsize.width/2); let y = position.y - (shipsize.height/2); let transform = "translate(" + x + " " + y + ") rotate(" + angle + " 15 15) "; spaceship.setattribute("transform", transform); } finally, the addeventlistener() method is used to start listening for keydown events, acting on each key by updating the ship position and rotation angle, then calling refresh() to draw the ship at its new position and angle.

Using the MediaStream Recording API - Web APIs
ute; top: 2px; right: 3px; z-index: 5; cursor: pointer; } then we hide the actual checkbox, because we don't want it cluttering up our ui: input[type=checkbox] { position: absolute; top: -100px; } next, we style the information screen (wrapped in an <aside> element) how we want it, give it fixed position so that it doesn't appear in the layout flow and affect the main ui, transform it to the position we want it to sit in by default, and give it a transition for smooth showing/hiding: aside { position: fixed; top: 0; left: 0; text-shadow: 1px 1px 1px black; width: 100%; height: 100%; transform: translatex(100%); transition: 0.6s all; background-color: #999; background-image: linear-gradient(to top right, rgba(0,0,0,0), rgba(0,0,0,0.5)); } las...
...t, we write a rule to say that when the checkbox is checked (when we click/focus the label), the adjacent <aside> element will have its horizontal translation value changed and transition smoothly into view: input[type=checkbox]:checked ~ aside { transform: translatex(0); } basic app setup to grab the media stream we want to capture, we use getusermedia().

OscillatorNode.setPeriodicWave() - Web APIs
you can think of it as the result of a fourier transform, where you get frequency domain values from time domain value.
... here, with createperiodicwave(), you specify the frequencies, and the browser performs a an inverse fourier transform to get a time domain buffer for the frequency of the oscillator.

SVGPatternElement - Web APIs
svgpatternelement.patterntransform read only an svganimatedtransformlist corresponding to the patterntransform attribute of the given <pattern> element.
... candidate recommendation removed the implemented interfaces svgtests, svglangspace, svgexternalresourcesrequired, svgstylable, and svgtransformable.

VRStageParameters - Web APIs
properties vrstageparameters.sittingtostandingtransform read only contains a matrix that transforms the sitting-space view matrices of vrframedata to standing-space.
...tor.getvrdisplays().then(function(displays) { vrdisplay = displays[0]; var stageparams = vrdisplay.stageparameters; // stageparams is a vrstageparameters object if(stageparams === null) { info.textcontent = 'your vr hardware does not support room-scale experiences.' } else { info.innerhtml = '<strong>display stage parameters</strong>' + '<br>sitting to standing transform: ' + stageparams.sittingtostandingtransform + '<br>play area width (m): ' + stageparams.sizex + '<br>play area depth (m): ' + stageparams.sizey } }); specifications specification status comment webvr 1.1the definition of 'vrstageparameters' in that specification.

Visual Viewport API - Web APIs
using requestanimationframe() ensures that the transform ocurrs before the next render.
... bottombar.style.transform = 'translate(' + offsetleft + 'px,' + offsettop + 'px) ' + 'scale(' + 1/viewport.scale + ')' }) } window.visualviewport.addeventlistener('scroll', viewporthandler); window.visualviewport.addeventlistener('resize', viewporthandler); specifications specification status comment ...

WebGL2RenderingContext.bindBufferBase() - Web APIs
possible values: gl.transform_feedback_buffer gl.uniform_buffer index a gluint specifying the index of the target.
... examples gl.bindbufferbase(gl.transform_feedback_buffer, 0, buffer); specifications specification status comment webgl 2.0the definition of 'bindbufferbase' in that specification.

WebGL2RenderingContext.bindBufferRange() - Web APIs
possible values: gl.transform_feedback_buffer gl.uniform_buffer index a gluint specifying the index of the target.
... examples gl.bindbufferrange(gl.transform_feedback_buffer, 1, buffer, 0, 4); specifications specification status comment webgl 2.0the definition of 'bindbufferrange' in that specification.

WebGL2RenderingContext.getBufferSubData() - Web APIs
gl.transform_feedback_buffer: buffer for transform feedback operations.
... an invalid_operation error is generated if: zero is bound to target target is transform_feedback_buffer, and any transform feedback object is currently active.

WebGLActiveInfo - Web APIs
examples a webglactiveinfo object is returned by: webglrenderingcontext.getactiveattrib() webglrenderingcontext.getactiveuniform() or webgl2renderingcontext.gettransformfeedbackvarying() webglactiveinfo?
...gettransformfeedbackvarying(webglprogram?

WebGLRenderingContext.bindBuffer() - Web APIs
gl.transform_feedback_buffer: buffer for transform feedback operations.
... adds new target buffers: gl.copy_read_buffer, gl.copy_write_buffer, gl.transform_feedback_buffer, gl.uniform_buffer, gl.pixel_pack_buffer, gl.pixel_unpack_buffer opengl es 3.0the definition of 'glbindbuffer' in that specification.

WebGLRenderingContext.bufferData() - Web APIs
gl.transform_feedback_buffer: buffer for transform feedback operations.
... adds new target buffers: gl.copy_read_buffer, gl.copy_write_buffer, gl.transform_feedback_buffer, gl.uniform_buffer, gl.pixel_pack_buffer, gl.pixel_unpack_buffer adds new usage hints: gl.static_read, gl.dynamic_read, gl.stream_read, gl.static_copy, gl.dynamic_copy, gl.stream_copy.

WebGLRenderingContext.bufferSubData() - Web APIs
gl.transform_feedback_buffer: buffer for transform feedback operations.
... adds new target buffers: gl.copy_read_buffer, gl.copy_write_buffer, gl.transform_feedback_buffer, gl.uniform_buffer, gl.pixel_pack_buffer, gl.pixel_unpack_buffer.

WebGLRenderingContext.getBufferParameter() - Web APIs
gl.transform_feedback_buffer: buffer for transform feedback operations.
... adds new target buffers: gl.copy_read_buffer, gl.copy_write_buffer, gl.transform_feedback_buffer, gl.uniform_buffer, gl.pixel_pack_buffer, gl.pixel_unpack_buffer adds new usage hints: gl.static_read, gl.dynamic_read, gl.stream_read, gl.static_copy, gl.dynamic_copy, gl.stream_copy.

A basic 2D WebGL animation example - Web APIs
we're also rotating the shape, and we can do that here, by applying a transform.
... the standard webgl global gl_position is then set to the transformed and rotated vertex's position.

WebGL constants - Web APIs
unsigned_int_vec2 0x8dc6 unsigned_int_vec3 0x8dc7 unsigned_int_vec4 0x8dc8 unsigned_normalized 0x8c17 signed_normalized 0x8f9c vertex attributes constant name value description vertex_attrib_array_integer 0x88fd vertex_attrib_array_divisor 0x88fe transform feedback constant name value description transform_feedback_buffer_mode 0x8c7f max_transform_feedback_separate_components 0x8c80 transform_feedback_varyings 0x8c83 transform_feedback_buffer_start 0x8c84 transform_feedback_buffer_size 0x8c85 transform_feedback_primitives_written 0x8...
...c88 max_transform_feedback_interleaved_components 0x8c8a max_transform_feedback_separate_attribs 0x8c8b interleaved_attribs 0x8c8c separate_attribs 0x8c8d transform_feedback_buffer 0x8c8e transform_feedback_buffer_binding 0x8c8f transform_feedback 0x8e22 transform_feedback_paused 0x8e23 transform_feedback_active 0x8e24 transform_feedback_binding 0x8e25 framebuffers and renderbuffers constant name value description framebuffer_attachment_color_encoding 0x8210 framebuffer_attachment_component_type 0x8211 framebuffer_attachment_red_size 0x8212 ...

Adding 2D content to a WebGL context - Web APIs
its job is to transform the input vertex from its original coordinate system into the clip space coordinate system used by webgl, in which each axis has a range from -1.0 to 1.0, regardless of aspect ratio, actual size, or any other factors.
... the vertex shader must perform the needed transforms on the vertex's position, make any other adjustments or calculations it needs to make on a per-vertex basis, then return the transformed vertex by saving it in a special variable provided by glsl, called gl_position.

WebXR Device API - Web APIs
xrrigidtransform a transform defined using a position and orientation in the virtual space's coordinate system as described by the xrspace.
... matrix math for the web a guide covering how matrices can be used on the web, including both for css transforms and for webgl purposes, as well as to handle the positioning and orientation of objects in webxr contexts.

Window.convertPointFromNodeToPage() - Web APIs
specifications this method was specified in the defunct 20 march 2009 working draft of css 2d transforms module level 3.
... it is not present in the current css transforms module level 1 working draft.

Window.convertPointFromPageToNode - Web APIs
specifications this method was specified in the defunct 20 march 2009 working draft of css 2d transforms module level 3.
... it is not present in the current css transforms module level 1 working draft.

XRInputSource.gripSpace - Web APIs
for (let source in xrsession.inputsources) { if (source.gripspace) { let grippose = frame.getpose(source.gripspace, xrrefspace); if (grippose) { mydrawmeshusingtransform(controllermesh, grippose.transform.matrix); } } } for each input source which has a value for gripspace, this loop obtains the xrpose representing the position and orientation that are described by gripspace.
... if a valid pose is returned, a method mydrawmeshusingtransform() is called to draw the controller's mesh transformed using the grip pose's transform matrix.

XRInputSourceEvent.frame - Web APIs
then, if the result isn't null, the target ray pose's transform is passed into a function called mycheckandhandlehit() to see if the ray was pointing at anything when the select was triggered.
... xrsession.onselectstart = event => { let targetraypose = event.frame.getpose(event.inputsource.targetrayspace, myrefspace); if (targetraypose) { checkandhandlehit(targetraypose.transform); } }; specifications specification status comment webxr device apithe definition of 'xrinputsourceevent.frame' in that specification.

XRReferenceSpaceEvent - Web APIs
transform read only an xrrigidtransform object indicating the position and orientation of the specified referencespace's native origin after the event, defined relative to the coordinate system before the event.
...this is an opportunity for your app to update any stored transforms, position/orientation information, or the like—or to dump any cached values based on the reference's space's origin so you can recompute them as needed.

XRReferenceSpaceEventInit.referenceSpace - Web APIs
syntax let eventinitdict = { referencespace: xrreferencespace, transform: xrrigidtransform }); value an xrreferencespace indicating the source of the event.
... let refspaceevent = new xrreferencespaceevent("reset", { referencespace: myrefspace, transform: mytransform }); specifications specification status comment webxr device apithe definition of 'xrreferencespaceeventinit.referencespace' in that specification.

XRReferenceSpaceEventInit - Web APIs
transform an xrrigidtransform which maps the old coordinate system (from before the changes indicated by this event) to the new coordiante system.
... let refspaceevent = new xrreferencespaceevent("reset", { referencespace: myrefspace, transform: mytransform }); specifications specification status comment webxr device apithe definition of 'xrreferencespaceeventinit' in that specification.

XRSession.onsqueeze - Web APIs
then we pass the currently held object and the target ray's transform matrix into a function we call dropobjectusingray() to drop the object, using the target ray to determine the surface upon which the object should be placed.
... xrsession.onsqueeze = event => { if (event.inputsource.handedness == user.handedness) { let targetraypose = event.frame.getpose(event.inputsource.targetrayspace, myrefspace); if (user.heldobject && targetraypose) { dropobjectusingray(user.heldobject, targetraypose.transform.matrix): } } }; see the examples in the onsqueezestart and onsqueezeend event handlers for the reset of the event handling related to this approach.

XRSession: select event - Web APIs
the handler fetches the pose representing the target ray for tracked-pointer inputs and sends the pose's transform to a function called myhandleselectwithray().
... xrsession.addeventlistener("select", event => { if (event.inputsource.targetraymode == "tracked-pointer") { let targetraypose = event.frame.getpose(event.inputsource.targetrayspace, myrefspace); if (targetraypose) { myhandleselectwithray(targetraypose.transform); } } }); you can of course also set up a handler for select events by setting the xrsession object's onselect event handler property to a function that handles the event: xrsession.onselect = event => { if (event.inputsource.targetraymode == "tracked-pointer") { let targetraypose = event.frame.getpose(event.inputsource.targetrayspace, myrefspace); if (targetraypose) { myhandleselectwithray(targetraypose.transform); } } }; specificat...

XSLT Basic Example - Web APIs
basic example this first example demonstrates the basics of setting up an xslt transformation in a browser.
...bar</author> </authors> <body>this is my article text.</body> </article> xsl stylesheet (example.xsl) : <?xml version="1.0"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/xsl/transform"> <xsl:output method="text"/> <xsl:template match="/"> article - <xsl:value-of select="/article/title"/> authors: <xsl:apply-templates select="/article/authors/author"/> </xsl:template> <xsl:template match="author"> - <xsl:value-of select="." /> </xsl:template> </xsl:stylesheet> browser output : article - my article authors: - mr.

Introduction - Web APIs
xsl (extensible stylesheet language) transformations are composed of two parts: xsl elements, which allow the transformation of an xml tree into another markup tree and xpath, a selection language for trees.
... transformations in xslt are based on rules that consist of templates.

Resources - Web APIs
resources transforming xml: netscape and xslt what kind of language is xslt?
... at ibm developerworks xslt tutorial at zvon.org xpath tutorial at zvon.org using the mozilla javascript interface to do xsl transformations at mozilla.org mozilla.org's xslt project page, which includes a frequently encountered issues section.

::first-line (:first-line) - CSS: Cascading Style Sheets
ature-settings, font-language-override, font-weight, font-size, font-size-adjust, font-stretch, and font-family all background-related properties: background-color, background-clip, background-image, background-origin, background-position, background-repeat, background-size, background-attachment, and background-blend-mode the color property word-spacing, letter-spacing, text-decoration, text-transform, and line-height text-shadow, text-decoration, text-decoration-color, text-decoration-line, text-decoration-style, and vertical-align.
...see what i mean?</p> <span>the first line of this text will not receive special styling because it is not a block-level element.</span> css ::first-line { color: blue; text-transform: uppercase; /* warning: do not use these */ /* many properties are invalid in ::first-line pseudo-elements */ margin-left: 20px; text-indent: 20px; } result specifications specification status comment css pseudo-elements level 4the definition of '::first-line' in that specification.

Border-image generator - CSS: Cascading Style Sheets
elect: none; user-select: none; } .ui-input-slider * { float: left; height: 100%; line-height: 100%; } /* input slider */ .ui-input-slider > input { margin: 0; padding: 0; width: 50px; text-align: center; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .ui-input-slider-info { width: 90px; padding: 0px 10px 0px 0px; text-align: right; text-transform: lowercase; } .ui-input-slider-left, .ui-input-slider-right { width: 16px; cursor: pointer; background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat; } .ui-input-slider-right { background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat; } .ui-input-slider-name { width: 90px; padding: 0 10px 0 0; text-align: right; tex...
...t-transform: lowercase; } .ui-input-slider-btn-set { width: 25px; background-color: #2c9fc9; border-radius: 5px; color: #fff; font-weight: bold; line-height: 14px; text-align: center; } .ui-input-slider-btn-set:hover { background-color: #379b4a; cursor: pointer; } /*************************************************************************************/ /*************************************************************************************/ /* * ui dropdown */ /* dropdown */ .ui-dropdown { height: 2em; width: 120px; font-family: "segoe ui", arial, helvetica, sans-serif; font-size: 12px; background-image: url("https://mdn.mozillademos.org/files/6037/drop_arrow_icon.png"); background-position: right center; background-repeat: no-repeat; background-color: #359740; position: rel...

Border-radius generator - CSS: Cascading Style Sheets
e; user-select: none; } .ui-input-slider-container * { float: left; height: 100%; line-height: 100%; } /* input slider */ .ui-input-slider > input { margin: 0; padding: 0; width: 50px; text-align: center; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .ui-input-slider-info { width: 90px; padding: 0px 10px 0px 0px; text-align: right; text-transform: lowercase; } .ui-input-slider-left, .ui-input-slider-right { width: 16px; cursor: pointer; background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat; } .ui-input-slider-right { background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat; } .ui-input-slider-name { width: 90px; padding: 0 10px 0 0; text-align: right; tex...
...t-transform: lowercase; } .ui-input-slider-btn-set { width: 25px; background-color: #2c9fc9; border-radius: 5px; color: #fff; font-weight: bold; line-height: 14px; text-align: center; } .ui-input-slider-btn-set:hover { background-color: #379b4a; cursor: pointer; } /* * ui component */ /* checkbox */ .ui-checkbox { text-align: center; font-size: 16px; font-family: "segoe ui", arial, helvetica, sans-serif; line-height: 1.5em; color: #fff; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-checkbox > input { display: none; } .ui-checkbox > label { font-size: 12px; padding: 0.333em 1.666em 0.5em; height: 1em; line-height: 1em; background-color: #888; background-image: url("https://mdn.mozillademos.org/files/5683/disabl...

CSS Text - CSS: Cascading Style Sheets
css text is a module of css that defines how to perform text manipulation, like line breaking, justification and alignment, white space handling, and text transformation.
... reference properties hanging-punctuation hyphens letter-spacing line-break overflow-wrap tab-size text-align text-align-last text-indent text-justify text-size-adjust text-transform white-space word-break word-spacing specifications specification status comment css logical properties and values level 1 editor's draft updates some properties to be independent of the directionality of the text.

font-weight - CSS: Cascading Style Sheets
r/mutatorsans) and is used here under the terms of its license: https://github.com/letterror/mutatorsans/blob/master/license */ @font-face { src: url('https://mdn.mozillademos.org/files/16011/mutatorsans.ttf'); font-family:'mutatorsans'; font-style: normal; } label { font: 1rem monospace; white-space: nowrap; } .container { max-height: 150px; overflow-y: auto; } .sample { text-transform: uppercase; font: 1.5rem 'mutatorsans', sans-serif; } html, body { max-height: 100vh; max-width: 100vw; overflow: hidden; } body { display: flex; flex-direction: column; } header { margin-bottom: 1.5rem; } .container { flex-grow: 1; } .container > p { margin-top: 0; margin-bottom: 0; } javascript let weightlabel = document.queryselector('label[for="weight"]'); let w...
...it also applies to ::first-letter and ::first-line.inheritedyescomputed valuethe keyword or the numerical value as specified, with bolder and lighter transformed to the real valueanimation typea font weight formal syntax <font-weight-absolute> | bolder | lighterwhere <font-weight-absolute> = normal | bold | <number <a href="/docs/css/value_definition_syntax#brackets" title="brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[1,1000]> examples setting font weights html <p> alice was beginning...

offset-anchor - CSS: Cascading Style Sheets
ntage> values */ offset-anchor: 25% 75%; /* <length> values */ offset-anchor: 0 0; offset-anchor: 1cm 2cm; offset-anchor: 10ch 8em; /* edge offsets values */ offset-anchor: bottom 10px right 20px; offset-anchor: right 3em bottom 10px; /* global values */ offset-anchor: inherit; offset-anchor: initial; offset-anchor: unset; values auto offset-anchor is given the same value as the element's transform-origin, unless offset-path is none, in which case it takes its value from offset-position.
... formal definition initial valueautoapplies totransformable elementsinheritednopercentagesrelativetowidthandheightcomputed valuefor <length> the absolute value, otherwise a percentageanimation typea position formal syntax auto | <position>where <position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]?

offset-path - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies totransformable elementsinheritednocomputed valueas specifiedanimation typeas <angle>, <basic-shape> or <path()>creates stacking contextyes formal syntax none | ray( [ <angle> && <size>?
...0 h606 a11,11 0 0,1 595,789 v434 a11,11 0 0,0 584,423 h506 l900,190" fill="none" stroke="black" stroke-width="13" stroke-linejoin="round" stroke-linecap="round" /> <path id="firstscissorhalf" class="scissorhalf" d="m30,0 h-10 a10,10 0 0,0 -20,10 a20,20 0 1,1 -40,-10 h20 a10,10 0 0,1 30,0 m-40,20 a10,10 1 0,0 -40,0 a10,10 1 0,0 -40,20 m0,0" transform="translate(0,0)" fill="green" stroke="black" stroke-width="5" stroke-linejoin="round" stroke-linecap="round" fill-rule="evenodd" /> <path id="secondscissorhalf" class="scissorhalf" d="m30,0 h-10 a10,10 0 0,1 -20,-10 a20,20 0 1,0 -40,10 h20 a10,10 0 0,0 30,0 m-40,-20 a10,10 1 0,0 -40,0 a10,10 1 0,0 -40,-20 m0,0" transform="translate...

offset-rotate - CSS: Cascading Style Sheets
<angle> the element has a constant clockwise rotation transformation applied to it by the specified rotation angle.
... formal definition initial valueautoapplies totransformable elementsinheritednocomputed valueas specifiedanimation typeas <angle>, <basic-shape> or <path()> formal syntax [ auto | reverse ] | <angle> examples setting element orientation along its offset path html <div></div> <div></div> <div></div> css div { width: 40px; height: 40px; background: #2bc4a2; margin: 20px; clip-path: polygon(0% 0%, 70% 0%, 100% 50%, 70% 100%, 0% 100%, 30% 50%); animation: move 5000ms infinite alternate ease-in-out; offset-...

zoom - CSS: Cascading Style Sheets
transform: scale() should be used instead of this property, if possible.
... however, unlike css transforms, zoom affects the layout size of the element.

Demos of open web technologies
2d graphics canvas blob sallad: an interactive blob using javascript and canvas (code demos) 3d raycaster processing.js p5js 3d on 2d canvas minipaint: image editor (source code) zen photon garden (source code) multi touch in canvas demo (source code) svg bubblemenu (visual effects and interaction) html transformations using foreignobject (visual effects and transforms) phonetics guide (interactive) 3d objects demo (interactive) blobular (interactive) video embedded in svg (or use the local download) summer html image map creator (source code) video video 3d animation "mozilla constantly evolving" video 3d animation "floating dance" streaming anime, movie trailer and interview billy's browser...
... firefox flick virtual barber shop transformers movie trailer a scanner darkly movie trailer (with built in controls) events firing and volume control dragable and sizable videos 3d graphics webgl web audio fireworks ioquake3 (source code) escher puzzle (source code) kai 'opua (source code) virtual reality the polar sea (source code) sechelt fly-through (source code) css css zen garden css floating logo "mozilla" paperfold css blockout rubik's cube pure css slides planetarium (source code) loader with blend modes text reveal with clip-path ambient shadow with custom properties luminiscent vial css-based single page application (source code) transformations impress.js (source code) games ioquake3 (source code) kai 'opua (source code) web apis noti...

Event developer guide - Developer guides
the device on which the web browser is running can trigger events, for example due to a change in its position and orientation in the real world, as discussed partially by the page on orientation coordinate systems and the page on the use of 3d transforms.
...you should instead use the standard touch events api, supported since gecko/firefox 6 with multi-touch support added in gecko/firefox 12.using device orientation with 3d transformsthis article provides tips on how to use device orientation information in tandem with css 3d transforms.

203 Non-Authoritative Information - HTTP
the http 203 non-authoritative information response status indicates that the request was successful but the enclosed payload has been modified by a transforming proxy from that of the origin server's 200 (ok) response .
... the 203 response is similar to the value 214, meaning transformation applied, of the warning header code, which has the additional advantage of being applicable to responses with any status code.

Function.name - JavaScript
javascript compressors and minifiers warning: be careful when using function.name and source code transformations, such as those carried out by javascript compressors (minifiers) or obfuscators.
...such transformations often change a function's name at build-time.

Object.fromEntries() - JavaScript
the object.fromentries() method transforms a list of key-value pairs into an object.
...m map to object: const map = new map([ ['foo', 'bar'], ['baz', 42] ]); const obj = object.fromentries(map); console.log(obj); // { foo: "bar", baz: 42 } converting an array to an object with object.fromentries, you can convert from array to object: const arr = [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ]; const obj = object.fromentries(arr); console.log(obj); // { 0: "a", 1: "b", 2: "c" } object transformations with object.fromentries, its reverse method object.entries(), and array manipulation methods, you are able to transform objects like this: const object1 = { a: 1, b: 2, c: 3 }; const object2 = object.fromentries( object.entries(object1) .map(([ key, val ]) => [ key, val * 2 ]) ); console.log(object2); // { a: 2, b: 4, c: 6 } please do not add polyfills on mdn pages.

Object.setPrototypeOf() - JavaScript
* returns @object (if it was a primitive value it will transformed into an object).
...; } function mammalspecies(smammalspecies) { this.species = smammalspecies; } mammalspecies.prototype = new mammal(); mammalspecies.prototype.constructor = mammalspecies; var ocat = new mammalspecies('felis'); console.log(ocat.ismammal); // 'yes' function animal() { this.breathing = 'yes'; } object.appendchain(ocat, new animal()); console.log(ocat.breathing); // 'yes' second example: transforming a primitive value into an instance of its constructor and append its chain to a prototype function mysymbol() { this.issymbol = 'yes'; } var nprime = 17; console.log(typeof nprime); // 'number' var oprime = object.appendchain(nprime, new mysymbol()); console.log(oprime); // '17' console.log(oprime.issymbol); // 'yes' console.log(typeof oprime); // 'object' third example: appending a c...

String.prototype.replace() - JavaScript
the replacement function accepts the matched snippet as its parameter, and uses it to transform the case and concatenate the hyphen before returning.
... because we want to further transform the result of the match before the final substitution is made, we must use a function.

requiredFeatures - SVG: Scalable Vector Graphics
twentynine elements are using this attribute: <a>, <altglyph>, <animate>, <animatecolor>, <animatemotion>, <animatetransform>, <circle>, <clippath>, <cursor>, <defs>, <ellipse>, <foreignobject>, <g>, <image>, <line>, <mask>, <path>, <pattern>, <polygon>, <polyline>, <rect>, <set>, <svg>, <switch>, <text>, <textpath>, <tref>, <tspan>, <use> html, body, svg { height: 100%; } text { fill: white; } <svg viewbox="0 0 250 45" xmlns="http://www.w3.org/2000/svg"> <g> <rect fill="forestgreen" x="10" y="10" heig...
.../svg11/feature#externalresourcesrequired the browser supports the externalresourcesrequired attribute http://www.w3.org/tr/svg11/feature#view the browser supports the <view> element http://www.w3.org/tr/svg11/feature#script the browser supports the <script> element http://www.w3.org/tr/svg11/feature#animation the browser supports the <animate>, <set>, <animatemotion>, <animatetransform>, <animatecolor> and <mpath> elements http://www.w3.org/tr/svg11/feature#font the browser supports the <font>, <font-face>, <glyph>, <missing-glyph>, <hkern>, <vkern>, <font-face-src>, <font-face-uri>, <font-face-format> and <font-face-name> elements http://www.w3.org/tr/svg11/feature#basicfont the browser supports the <font>, <font-face>, <glyph>, <missing-glyph>, <hkern>, <font-face...

rotate - SVG: Scalable Vector Graphics
45 0,1 110 10 a120,120 -45 0,1 10,110" stroke="lightgrey" stroke-width="2" fill="none" id="themotionpath"/> <!-- red arrow which will not rotate --> <path fill="red" d="m-5,-5 l10,0 -5,5 0,0 z"> <!-- define the motion path animation --> <animatemotion dur="6s" repeatcount="indefinite" rotate="0"> <mpath href="#themotionpath"/> </animatemotion> </path> <g transform="translate(100, 0)"> <use href="#themotionpath"/> <!-- green arrow which will rotate along the motion path --> <path fill="green" d="m-5,-5 l10,0 -5,5 0,0 z"> <!-- define the motion path animation --> <animatemotion dur="6s" repeatcount="indefinite" rotate="auto"> <mpath href="#themotionpath"/> </animatemotion> </path> </g> <g transform="translate(200, 0)"> ...
...<use href="#themotionpath"/> <!-- blue arrow which will rotate backwards along the motion path --> <path fill="blue" d="m-5,-5 l10,0 -5,5 0,0 z"> <!-- define the motion path animation --> <animatemotion dur="6s" repeatcount="indefinite" rotate="auto-reverse"> <mpath href="#themotionpath"/> </animatemotion> </path> </g> <g transform="translate(300, 0)"> <use href="#themotionpath"/> <!-- purple arrow which will have a static rotation of 210 degrees --> <path fill="purple" d="m-5,-5 l10,0 -5,5 0,0 z"> <!-- define the motion path animation --> <animatemotion dur="6s" repeatcount="indefinite" rotate="210"> <mpath href="#themotionpath"/> </animatemotion> </path> </g> </svg> result specifications specification status comme...

stitchTiles - SVG: Scalable Vector Graphics
0" width="100%" height="100%"> <feturbulence basefrequency="0.025" stitchtiles="nostitch" /> </filter> <filter id="noise2" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.025" stitchtiles="stitch" /> </filter> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise1);" /> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise1); transform: translate(100px, 0);" /> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise1); transform: translate(0, 100px);" /> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise1); transform: translate(100px, 100px);" /> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise2); transform: translate(220px, 0);" /> <rect x="0" y="0" width="100" height...
...="100" style="filter: url(#noise2); transform: translate(320px, 0);" /> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise2); transform: translate(220px, 100px);" /> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise2); transform: translate(320px, 100px);" /> </svg> usage notes value nostitch | stitch default value nostitch animatable yes nostitch this value indicates that no attempt is made to achieve smooth transitions at the border of tiles which contain a turbulence function.

zoomAndPan - SVG: Scalable Vector Graphics
magnification in this context means the effect of a supplemental scale and translate transformation on the outermost svg document fragment.
... panning represents a translation (i.e., a shift) transformation on an svg document fragment in response to a user interface action.

<defs> - SVG: Scalable Vector Graphics
html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- some graphical objects to use --> <defs> <circle id="mycircle" cx="0" cy="0" r="5" /> <lineargradient id="mygradient" gradienttransform="rotate(90)"> <stop offset="20%" stop-color="gold" /> <stop offset="90%" stop-color="red" /> </lineargradient> </defs> <!-- using my graphical objects --> <use x="5" y="5" xlink:href="#mycircle" fill="url('#mygradient')" /> </svg> attributes global attributes core attributes most notably: id lang styling attributes class, style event attributes global event at...
...document element event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility usage notes categoriescontainer element, structural elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>,...

<ellipse> - SVG: Scalable Vector Graphics
note: ellipses are unable to specify the exact orientation of the ellipse (if, for example, you wanted to draw an ellipse tilted at a 45 degree angle), but it can be rotated by using the transform attribute.
...tributes global event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, ari...

<g> - SVG: Scalable Vector Graphics
transformations applied to the <g> element are performed on its child elements, and its attributes are inherited by its children.
...tributes global event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, ari...

SVG element reference - SVG: Scalable Vector Graphics
svg elements a to z a <a> <animate> <animatemotion> <animatetransform> c <circle> <clippath> <color-profile> d <defs> <desc> <discard> e <ellipse> f <feblend> <fecolormatrix> <fecomponenttransfer> <fecomposite> <feconvolvematrix> <fediffuselighting> <fedisplacementmap> <fedistantlight> <fedropshadow> <feflood> <fefunca> <fefuncb> <fefuncg> <fefuncr> <fegaussianblur> <feimage> <femerge> <femergenode> <femorphology> <feoffset> <fepointlight> <fespecularlighting> <fespotlight> ...
...hgradient> <meshpatch> <meshrow> <metadata> <mpath> p <path> <pattern> <polygon> <polyline> r <radialgradient> <rect> s <script> <set> <solidcolor> <stop> <style> <svg> <switch> <symbol> t <text> <textpath> <title> <tspan> u <unknown> <use> v <view> svg elements by category animation elements <animate>, <animatecolor>, <animatemotion>, <animatetransform>, <discard>, <mpath>, <set> basic shapes <circle>, <ellipse>, <line>, <polygon>, <polyline>, <rect> container elements <a>, <defs>, <g>, <marker>, <mask>, <missing-glyph>, <pattern>, <svg>, <switch>, <symbol>, <unknown> descriptive elements <desc>, <metadata>, <title> filter primitive elements <feblend>, <fecolormatrix>, <fecomponenttransfer>, <fecomposite>, <feconvolvematrix>, <fediffuse...

Gradients in SVG - SVG: Scalable Vector Graphics
both linear and radial gradients also take a few other attributes to describe transformations they may undergo.
...the radialgradient above would be rewritten: <radialgradient id="gradient" cx="60" cy="60" r="50" fx="35" fy="35" gradientunits="userspaceonuse"> you can also then apply another transformation to the gradient by using the gradienttransform attribute, but since we haven't introduced transforms yet, i'll leave that for later.

XML introduction - XML: Extensible Markup Language
<?xml-stylesheet type="text/css" href="stylesheet.css"?> there is also another more powerful way to display xml: the extensible stylesheet language transformations (xslt) which can be used to transform xml into other languages such as html.
... <?xml-stylesheet type="text/xsl" href="transform.xsl"?> recommendations this article is obviously only a very brief introduction to what xml is, with a few small examples and references to get you started.

generate-id - XPath
notes the same id must be generated every time for the same node in the current document in the current transformation.
... the generated id may not be the same in subsequent transformations.

XML-related code snippets - Archive of obsolete content
how to create a dom tree using xmlhttprequest parsing and serializing xml using xpath jxon (lossless javascript xml object notation) xsl transforms xlink xinclude xml:id xml:base support in old browsers xpointer svg namespaces, or why http://www.mozilla.org/keymaster/gat...re.is.only.xul is at the top of every xul document.

Handling Preferences - Archive of obsolete content
in the past we have used this directory to store xslt files for xml transformations and local storage template files (more on this later).

XPCOM Objects - Archive of obsolete content
in general, you can rely on javascript's ability to transform values to the correct type, but it's usually best to pass the right type in the first place.

Search Extension Tutorial (Draft) - Archive of obsolete content
function setpref(name, value, localized) { // if this is a localized preference, transform the value into an // appropriate data: url.

Inner-browsing extending the browser navigation paradigm - Archive of obsolete content
the mechanism can be as simple as copying new content to the current document, or as complex as performing dynamic transformations on the data source before applying the changes into the current document.

MCD, Mission Control Desktop, AKA AutoConfig - Archive of obsolete content
ng-long -pedantic -pthread -pipe c++ gcc version 3.4.3 20050227 (red hat 3.4.3-22.fc3) -fno-rtti -fno-exceptions -wall -wconversion -wpointer-arith -wcast-align -woverloaded-virtual -wsynth -wno-ctor-dtor-privacy -wno-non-virtual-dtor -wno-long-long -pedantic -fshort-wchar -pthread -pipe -i/usr/x11r6/include configure arguments --disable-mailnews --enable-extensions=cookie,xml-rpc,xmlextras,pref,transformiix,universalchardet,webservices,inspector,gnomevfs,negotiateauth --enable-crypto --disable-composer --enable-single-profile --disable-profilesharing --with-system-jpeg --with-system-zlib --with-system-png --with-pthreads --disable-tests --disable-jsd --disable-installer '--enable-optimize=-os -g -pipe -m32 -march=i386 -mtune=pentium4' --enable-xft --enable-xinerama --enable-default-toolkit=gtk2 -...

Source code directories overview - Archive of obsolete content
these include: cookies, irc, wallet, dom inspector, p3p, schema validation, spellchecker, transformiix, typeaheadfind, javascript debugger, xforms, etc.

Visualizing an audio spectrum - Archive of obsolete content
this example calculates and displays fast fourier transform (fft) spectrum data for the playing audio.

Fast Graphics Performance With HTML - Archive of obsolete content
use <div style="overflow:scroll><div style="background:white"><p>this is some text</p><p>and some more</p></div></div> instead of <div style="overflow:scroll><p>this is some text</p><p>and some more</p></div> animating 'transform' and 'opacity' properties can be done with the compositor which makes them efficient to animate ...

JavaScript Client API - Archive of obsolete content
records are transformed to wbo's, uploaded to a collection in a sync server and eventually downloaded by other sync clients.

Microsummary topics - Archive of obsolete content
for example, the following code snippet installs the microsummary generator from the creating a microsummary tutorial: var generatortext = ' \ <?xml version="1.0" encoding="utf-8"?> \ <generator xmlns="http://www.mozilla.org/microsummaries/0.1" \ name="firefox download count" \ uri="urn:{835daeb3-6760-47fa-8f4f-8e4fdea1fb16}"> \ <template> \ <transform xmlns="http://www.w3.org/1999/xsl/transform" version="1.0"> \ <output method="text"/> \ <template match="/"> \ <value-of select="id(\'download-count\')"/> \ <text> fx downloads</text> \ </template> \ </transform> \ </template> \ <pages> <include>http://(www\.)?spreadfirefox\.com/(index\.php)?</include> </pages> </generator> \ '...

Priority Content - Archive of obsolete content
book length works in progress: netscape gecko plugin api reference 1.0 original: netscape gecko plugin api reference 1.0 wiki location: gecko plugin api reference migrators: started: core javascript reference 1.5 original: core javascript reference 1.5 wiki location: core javascript 1.5 reference migrators: deb richardson in progress: transforming xml: netscape and xslt 1.0 original: transforming xml: netscape and xslt 1.0 wiki location: transforming xml with xslt migrators: serge k.

Frequently Asked Questions - Archive of obsolete content
for example we support svg exceptions and svgtransform objects.

Space Manager Detailed Design - Archive of obsolete content
next, create a rect from the occupied space passed in by the caller,transforming it first to world-coordinates by adding the space manager's offset to the occupied space rect passed in.

Anonymous Content - Archive of obsolete content
events flow through the final transformed content model after all elements have been repositioned through the usage of children tags.

Example Sticky Notes - Archive of obsolete content
--> <svg:svg width="60px" height="60px"> <svg:g fill-opacity="0.6" stroke="#ffffff" stroke-width="1px"> <svg:circle cx="25px" cy="12px" r="12" fill="#ff0000" transform="translate(0,0)"/> <svg:circle cx="25px" cy="12px" r="12" fill="#00ff00" transform="translate(7,12)"/> <svg:circle cx="25px" cy="12px" r="12" fill="#0000ff" transform="translate(-7,12)"/> </svg:g> </svg:svg> <children/> </content> <implementation> <!-- here and futher cdata wrappers around javascript code are not mandatory but recommended.

Menus - Archive of obsolete content
the first menubar encountered when parsing the xul window will be used as the main menu bar for the window, and on the macintosh, will be hidden from the main window and transformed into a native menu bar at the top of the screen.

XUL Structure - Archive of obsolete content
the mozilla rendering engine takes the content in the form of html source and transforms it into a document tree.

XUL Questions and Answers - Archive of obsolete content
(server can just send the xul code to use for popup - alternatively it can send generic xml describing the attributes of the items in the menu and you generate the xul on client by applying an xslt transform.) can i change a xul tree cell/row/item background color with javascript?

nsIContentPolicy - Archive of obsolete content
type_xslt 18 indicates a style sheet transformation.

Archived Mozilla and build documentation - Archive of obsolete content
building transformiix standalone calicalendarview an object implementing calicalendarview is generally intended to serve as a way of manipulating a set of dom nodes corresonding to a visual representation of calievent and calitodo objects.

Threats - Archive of obsolete content
link: red hat certificate system common criteria certification 8.1: deployment, planning, and installation original document information author(s): joint task force transformation initiative title: national institute of standards and technology (nist) special publication 800-30 revision 1, guide for conducting risk assessments last updated date: september 2012 copyright information: this document is not subject to copyright.

Browser Detection and Cross Browser Support - Archive of obsolete content
a common solution is to author content in a neutral format such as xml and use xslt transformations to generate the necessary html for each class of browser.

::-ms-browse - Archive of obsolete content
p-color border-top-left-radius border-top-right-radius border-top-style border-top-width box-shadow box-sizing color cursor display (values block, inline-block, none) @font-face font-size font-style font-weight height margin-bottom margin-left margin-right margin-top opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width syntax ::-ms-browse example html <label>select image: <input type="file"></label> css input[type="file"]::-ms-browse { color: red; background-color: yellow; } result output example specifications not part of any specification.

::-ms-check - Archive of obsolete content
p-color border-top-left-radius border-top-right-radius border-top-style border-top-width box-shadow box-sizing color cursor display (values block, inline-block, none) @font-face font-size font-style font-weight height margin-bottom margin-left margin-right margin-top opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width syntax ::-ms-check example html <form> <label for="redbutton">red</label> <input type="radio" id="redbutton"><br> <label for="greencheckbox">green</label> <input type="checkbox" id="greencheckbox"> </form> css input, label { display: inline; } input[type=radio]::-ms-check { border-color: red; /* this will make the border red when the butt...

::-ms-clear - Archive of obsolete content
p-color border-top-left-radius border-top-right-radius border-top-style border-top-width box-shadow box-sizing color cursor display (values block, inline-block, none) @font-face font-size font-style font-weight height margin-bottom margin-left margin-right margin-top opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width syntax ::-ms-clear example html <form> <label for="firstname">first name:</label> <input type="text" id="firstname" name="firstname" placeholder="first name"> <br> <label for="lastname">last name:</label> <input type="text" id="lastname" name="lastname" placeholder="second name"> </form> css input, label { display: block; } input[type=te...

::-ms-expand - Archive of obsolete content
p-color border-top-left-radius border-top-right-radius border-top-style border-top-width box-shadow box-sizing color cursor display (values block, inline-block, none) @font-face font-size font-style font-weight height margin-bottom margin-left margin-right margin-top opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width syntax ::-ms-clear specifications not part of any specification.

::-ms-fill-lower - Archive of obsolete content
der-top-width box-shadow box-sizing color cursor display (values block, inline-block, none) @font-face font-size font-style font-weight height margin-bottom margin-left margin-right margin-top -ms-background-position-x -ms-background-position-y -ms-high-contrast-adjust opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width specifications not part of any specification.

::-ms-fill-upper - Archive of obsolete content
der-top-width box-shadow box-sizing color cursor display (values block, inline-block, none) @font-face font-size font-style font-weight height margin-bottom margin-left margin-right margin-top -ms-background-position-x -ms-background-position-y -ms-high-contrast-adjust opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width syntax ::-ms-fill-upper specifications not part of any specification.

::-ms-fill - Archive of obsolete content
mation-name background-clip, background-color, background-image, background-origin, background-repeat, and background-size border border-radius box-shadow box-sizing color cursor display (values block, inline-block, none) font height margin -ms-background-position-x -ms-background-position-y -ms-high-contrast-adjust opacity outline-color, outline-style, and outline-width padding transform and transform-origin visibility syntax ::-ms-fill example html <progress value="10" max="50"></progress> css progress::-ms-fill { background-color: orange; } result a progress bar using this style might look something like this: ...

::-ms-reveal - Archive of obsolete content
der-top-width box-shadow box-sizing color cursor display (values block, inline-block, none) @font-face font-size font-style font-weight height margin-bottom margin-left margin-right margin-top -ms-background-position-x -ms-background-position-y -ms-high-contrast-adjust opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width syntax ::-ms-reveal specifications not part of any specification.

::-ms-thumb - Archive of obsolete content
der-top-width box-shadow box-sizing color cursor display (values block, inline-block, none) @font-face font-size font-style font-weight height margin-bottom margin-left margin-right margin-top -ms-background-position-x -ms-background-position-y -ms-high-contrast-adjust opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width syntax ::-ms-thumb specifications not part of any specification.

::-ms-ticks-after - Archive of obsolete content
der-top-width box-shadow box-sizing color cursor display (values block, inline-block, none) @font-face font-size font-style font-weight height margin-bottom margin-left margin-right margin-top -ms-background-position-x -ms-background-position-y -ms-high-contrast-adjust opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width syntax ::-ms-ticks-after ...

::-ms-ticks-before - Archive of obsolete content
der-top-width box-shadow box-sizing color cursor display (values block, inline-block, none) @font-face font-size font-style font-weight height margin-bottom margin-left margin-right margin-top -ms-background-position-x -ms-background-position-y -ms-high-contrast-adjust opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width syntax ::-ms-ticks-before ...

::-ms-track - Archive of obsolete content
der-top-width box-shadow box-sizing color cursor display (values block, inline-block, none) @font-face font-size font-style font-weight height margin-bottom margin-left margin-right margin-top -ms-background-position-x -ms-background-position-y -ms-high-contrast-adjust opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width syntax ::-ms-track see also ::-ms-thumb ::-ms-fill-upper ::-ms-fill-lower ::-webkit-slider-runnable-track ::-moz-range-track css-tricks: styling cross-browser compatible range inputs with css quirksmode: styling and scripting sliders ...

::-ms-value - Archive of obsolete content
der-top-width box-shadow box-sizing color cursor display (values block, inline-block, none) @font-face font-size font-style font-weight height margin-bottom margin-left margin-right margin-top -ms-background-position-x -ms-background-position-y -ms-high-contrast-adjust opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width syntax ::-ms-value example input::-ms-value { color: lime; font-style: italic; } to disable the default styling: select::-ms-value { background-color: transparent; color: inherit; } specifications not part of any specification.

Back to the Server: Server-Side JavaScript On The Rise - Archive of obsolete content
now more than 10 years later, with netscape's technology group having been transformed into the mozilla foundation, server-side javascript is seeing a strong resurgence because of the simplicity it provides to web developers reinvigorated by the fact that today's cpus can process javascript more than 10x faster than the cpus of the mid-90's ever could.

Windows Media in Netscape - Archive of obsolete content
netscape gecko based browsers such as netscape 7.1 provide comparable implementations of xslt transformations in memory via javascript.

Index - Game development
vertex shaders transform shape positions into 3d drawing coordinates.

3D games on the Web - Game development
they can be split into vertex shaders and fragment shaders (or pixel shaders) — the former transforms shape positions to real 3d drawing coordinates, while the latter computes rendering colors and other attributes.

Implementing controls using the Gamepad API - Game development
the second, hidden "change" implementation is the ability to transform the static fridge into a full-blown moving, shooting and eating machine.

Tiles and tilemaps overview - Game development
to be able to transform world coordinates into screen coordinates, we need the coordinates of the camera, since they determine which section of the world is being displayed.

Gecko FAQ - Gecko Redirect 1
gecko also offers the ability to parse various document types (html, xml, svg, etc), advanced rendering capabilities including compositing and transformations, and support for embedded javascript and plugins.

Cryptographic hash function - MDN Web Docs Glossary: Definitions of Web-related terms
a cryptographic hash function, also sometimes called a digest function, is a cryptographic primitive transforming a message of arbitrary size into a message of fixed size, called a digest.

Decryption - MDN Web Docs Glossary: Definitions of Web-related terms
decryption is a cryptographic primitive: it transforms a ciphertext message into plaintext using a cryptographic algorithm called a cipher.

Encryption - MDN Web Docs Glossary: Definitions of Web-related terms
encryption is a cryptographic primitive: it transforms a plaintext message into a ciphertext using a cryptographic algorithm called a cipher.

IDL - MDN Web Docs Glossary: Definitions of Web-related terms
the idl attribute is always going to use (but might transform) the underlying content attribute to return a value when you get it and is going to save something in the content attribute when you set it.

JSON - MDN Web Docs Glossary: Definitions of Web-related terms
(date objects by default serialize to a string containing the date in iso format, so the information isn't completely lost.) if you need json to represent additional data types, transform values as they are serialized or before they are deserialized.

Parser - MDN Web Docs Glossary: Definitions of Web-related terms
more generally, it's a piece of software that parses text and transforms its content to another representation.

Public-key cryptography - MDN Web Docs Glossary: Definitions of Web-related terms
the transformation performed by one of the keys can only be undone with the other key.

Quaternion - MDN Web Docs Glossary: Definitions of Web-related terms
learn more general knowledge quaternions and spatial rotation on wikipedia quaternion on wikipedia related xrrigidtransform.orientation in the webxr device api reference ...

Symmetric-key cryptography - MDN Web Docs Glossary: Definitions of Web-related terms
this is usually contrasted with public-key cryptography, in which keys are generated in pairs and the transformation made by one key can only be reversed using the other key.

UTF-8 - MDN Web Docs Glossary: Definitions of Web-related terms
utf-8 (ucs transformation format 8) is the world wide web's most common character encoding.

XSLT - MDN Web Docs Glossary: Definitions of Web-related terms
extensible stylesheet language transformations (xslt) is a declarative language used to convert xml documents into other xml documents, html, pdf, plain text, and so on.

Positioning - Learn web development
rks in exactly the same way as absolute positioning, with one key difference: whereas absolute positioning fixes an element in place relative to its nearest positioned ancestor (the initial containing block if there isn't one), fixed positioning usually fixes an element in place relative to the visible portion of the viewport, except if one of its ascendants is a fixed containing block due to its transform property being different from none.

CSS FAQ - Learn web development
for example: -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); note: for more information on dealing with prefixed properties, see handling common html and css problems — handling css prefixes from our cross-browser testing module.

How to build custom form controls - Learn web development
.select .optlist.hidden { /* this is a simple way to hide the list in an accessible way; we will talk more about accessibility in the end */ max-height: 0; visibility: hidden; } note: we could also have used transform: scale(1, 0) to give the optionlist no height and full width.

Adding vector graphics to the Web - Learn web development
more advanced svg features include <fecolormatrix> (transform colors using a transformation matrix,) <animate> (animate parts of your vector graphic,) and <mask> (apply a mask over the top of your image.) as a simple example, the following code creates a circle and a rectangle: <svg version="1.1" baseprofile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg"> <rect width="100%" height="100%" fill="black" /> <circle cx="1...

Choosing the right approach - Learn web development
mated spinner; you can find this example live on github (see the source code also): const spinner = document.queryselector('div'); let rotatecount = 0; let starttime = null; let raf; function draw(timestamp) { if(!starttime) { starttime = timestamp; } rotatecount = (timestamp - starttime) / 3; if(rotatecount > 359) { rotatecount %= 360; } spinner.style.transform = 'rotate(' + rotatecount + 'deg)'; raf = requestanimationframe(draw); } draw(); pitfalls you can't choose a specific framerate with requestanimationframe().

Drawing graphics - Learn web development
note: we won't cover save() and restore() here, but they are explained nicely in our transformations tutorial (and the ones that follow it).

TypeScript support in Svelte - Learn web development
for these kinds of cases, typescript provides several utility types to make it easier to apply these common transformations.

Implementing feature detection - Learn web development
paragraph.style.transform) in javascript.

Learn web development
tools and testing this topic covers the tools developers use to facilitate their work, such as cross-browser testing tools, linters, formatters, transformation tools, version control systems, deployment tools, and client-side javascript frameworks.

Frequently Asked Questions for Lightweight themes
in just a few seconds, you can install a theme and transform the look of your firefox web browser.

Eclipse CDT
for example, if you are using a mac and you search for callers of nsdisplaylistbuilder::isintransform, the results will not include the caller in nsobjectframe.cpp because that caller is wrapped in "#ifndef xp_macosx".

Writing localizable code
there are few exceptions to this rule, but in general, the localized file should comply with standards and should not require build tools to be transformed.

Fonts for Mozilla 2.0's MathML engine
in general, if the necessary glyphs are not available on the system then mozilla tries to stretch symbols using scale transforms, but that may result in a less pleasant rendering.

Mozilla Web Developer FAQ
dom) and xslt transformations that do not disable output escaping.

BloatView
total total 1754408 432556 179828 404184 2770976 nsstr 20 6261600 3781900 1120920 1791340 12955760 222760 48760 13280 76160 360960 nshashkey 8 610568 1842400 2457872 1134592 6045432 32000 536 568 1216 34320 nstexttransformer 548 8220 469088 1414936 1532756 3425000 0 0 0 0 0 nsstylecontextdata 736 259808 325312 489440 338560 1413120 141312 220800 -11040 94944 446016 nslinelayout 1100 2200 225500 402600 562100 1192400 0 0 0 0 0 nslocalfile 424 558832 199...

Profiling with the Firefox Profiler
it contains, for each layer, the type of the layer, and various metrics about the layer, such as the visible region and any transforms.

Scroll-linked effects
scrolling effects explained often scrolling effects are implemented by listening for the scroll event and then updating elements on the page in some way (usually the css position or transform property.) you can find a sampling of such effects at css scroll api: use cases.

Localization Use Cases
this takes the responsibility away from the developers and puts it in the hands of localizers, at the same time transforming it from a burden into an opportunity.

Installing Pork
$ export path=/builds/gcc-3.4.6-installed/bin:$path $ export cppflags=-m32 $ cc=gcc34 cxx=g++34 cppflags=-m32 ldflags=-m32 ../src/configure --enable-replace-cpp --prefix=/builds/gcc-3.4.6-installed --target=i686-pc-linux $ make $ make install program_transform_name= ...

Rhino overview
rhino contains all the features of javascript 1.7 allows direct scripting of java a javascript shell for executing javascript scripts a javascript compiler to transform javascript source files into java class files a javascript debugger for scripts executed with rhino language the javascript language itself is standardized by standard ecma-262 ecmascript: a general purpose, cross-platform programming language.

JIT Optimization Strategies
consider the following: function foo(arg) { return bar(arg, 3); } function bar() { return arguments[0] + arguments[1]; } in the above case, if foo is compiled with ion, and the call to bar is inlined, then this optimization can transform the entire procedure to the following pseudo-code: compiled foo(arg): // inlined call to bar(arg, 3) { return arg + 3; // } getelem_inlinecache this is the worst-case scenario for an element access optimization.

JS_THREADSAFE
use js_writestructuredclone to transform data into a flat array of bytes that can be safely written to disk, sent to another process or even another machine, or just passed to another thread.

XPCOM Stream Guide
we even have streams that take input from other streams and transform the data within them to something more useful.

Index
1106 nsixsltprocessor interfaces, interfaces:scriptable, xpcom, xpcom interface reference, xslt implemented by: @mozilla.org/document-transformer;1?type=xslt.

Introduction to XPCOM for the DOM
we also saw that an interface defined in xpidl contains methods and attributes, which are transformed into c++ functions by the xpidl compiler.

imgIContainer
auserspacetoimagespace the transformation from user space (for example, appunits) to image space.

nsIContentView
id nscontentviewid id that can be used in conjunction with nsidomwindowutils to change the actual document, instead of just how it is transformed; this is a 64-bit unsigned integer.

nsIDirIndexListener
they can then be transformed into an output format (such as rdf, html and so on) inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) method overview void onindexavailable(in nsirequest arequest, in nsisupports actxt, in nsidirindex aindex); void oninformationavailable(in nsirequest arequest, in nsisupports actxt, in astring ainfo); methods onindexavailable() called for each directory entry.

nsIFeedResult
stylesheet nsiuri an xslt stylesheet available to transform the source of the feed.

nsIProtocolHandler
if this is null, then utf-8 encoding is assumed and no character transformation is not performed.

nsIStandardURL
if null, then provide abaseuri implements this interface, the origin charset of abaseuri will be assumed, otherwise defaulting to utf-8 (that is, no charset transformation from aspec).

XSLT 2.0
for developers saxon-ce a javascript api is provided for initiating an xslt 2.0 transform from a web page.

Demo Addon
it lets you iterate over any collection and transforms your collection elements in the given objects, to use fixiterator, you have to import it with cu.import("resource:///modules/iteratorutils.jsm");.

Source map errors - Firefox Developer Tools
source maps are json files providing a way to associate transformed sources, as seen by the browser, with their original sources, as written by the developer.

Animation inspector example: CSS transitions - Firefox Developer Tools
g src="https://udn.realityripple.com/samples/e6/a96484b5c3.png" class="icon"/> <span class="note">firefox developer edition</span> </div> css content .channel { padding: 2em; margin: 0.5em; box-shadow: 1px 1px 5px #808080; margin: 1.5em; } .channel > * { vertical-align: middle; line-height: normal; } .icon { width: 50px; height: 50px; filter: grayscale(100%); transition: transform 750ms ease-in, filter 750ms ease-in-out; } .note { margin-left: 1em; font: 1.5em "open sans",arial,sans-serif; overflow: hidden; white-space: nowrap; display: inline-block; opacity: 0; width: 0; transition: opacity 500ms 150ms, width 500ms 150ms; } .icon#selected { filter: grayscale(0%); transform: scale(1.5); } .icon#selected+span { opacity: 1; width: 300px; } javas...

Animation inspector example: Web Animations API - Firefox Developer Tools
dow: 1px 1px 5px #808080; margin: 1.5em; } .channel > * { vertical-align: middle; line-height: normal; } #icon { width: 50px; height: 50px; filter: grayscale(100%); } #note { margin-left: 1em; font: 1.5em "open sans",arial,sans-serif; overflow: hidden; white-space: nowrap; display: inline-block; opacity: 0; width: 0; } javascript content var iconkeyframeset = [ { transform: 'scale(1)', filter: 'grayscale(100%)'}, { filter: 'grayscale(100%)', offset: 0.333}, { transform: 'scale(1.5)', offset: 0.666 }, { transform: 'scale(1.5)', filter: 'grayscale(0%)'} ]; var notekeyframeset = [ { opacity: '0', width: '0'}, { opacity: '1', width: '300px'} ]; var iconkeyframeoptions = { duration: 750, fill: 'forwards', easing: 'ease-in', enddelay: 100 } var note...

How to - Firefox Developer Tools
ayoutscss grid inspector: examine grid layoutsedit css filtersedit shape paths in cssedit fontsexamine event listenersexamine and edit cssexamine and edit htmlexamine and edit the box modelinspect and select colorsopen the inspectorreposition elements in the pageselect an elementselect and highlight elementsuse the inspector apiuse the inspector from the web consoleview background imagesvisualize transformswork with animations ...

Page Inspector - Firefox Developer Tools
how to to find out what you can do with the inspector, see the following how to guides: open the inspector examine and edit html examine and edit the box model inspect and select colors reposition elements in the page edit fonts visualize transforms use the inspector api select an element examine and edit css examine event listeners work with animations edit css filters edit css shapes view background images use the inspector from the web console examine css grid layouts examine css flexbox layouts reference keyboard shortcuts settings ...

Waterfall - Firefox Developer Tools
in particular, if you animate an element using the transform property, the browser will use a separate layer for the transformed element, and doesn't even have to repaint when the element is moved: the new position of the element is handled in composition.

Web Audio Editor - Firefox Developer Tools
within that context they then construct a number of audio nodes, including: nodes providing the audio source, such as an oscillator or a data buffer source nodes performing transformations such as delay and gain nodes representing the destination of the audio stream, such as the speakers each node has zero or more audioparam properties that configure its operation.

AnalyserNode.fftSize - Web APIs
the fftsize property of the analysernode interface is an unsigned long value and represents the window size in samples that is used when performing a fast fourier transform (fft) to get frequency domain data.

AnalyserNode.frequencyBinCount - Web APIs
for technical reasons related to how the fast fourier transform is defined, it is always half the value of analysernode.fftsize.

AnalyserNode - Web APIs
analysernode.fftsize is an unsigned long value representing the size of the fft (fast fourier transform) to be used to determine the frequency domain.

Animation.commitStyles() - Web APIs
examples const divelem = document.queryselector('div'); document.body.addeventlistener('mousemove', evt => { let anim = divelem.animate( { transform: `translate(${ evt.clientx}px, ${evt.clienty}px)` }, { duration: 500, fill: 'forwards' } ); anim.commitstyles(); }); specifications specification status comment web animationsthe definition of 'commitstyles()' in that specification.

Animation.onremove - Web APIs
examples in our simple replace indefinite animations demo, you can see the following code: const divelem = document.queryselector('div'); document.body.addeventlistener('mousemove', evt => { let anim = divelem.animate( { transform: `translate(${ evt.clientx}px, ${evt.clienty}px)` }, { duration: 500, fill: 'forwards' } ); anim.commitstyles(); //anim.persist() anim.onremove = function() { console.log('animation removed'); } console.log(anim.replacestate); }); here we have a <div> element, and an event listener that fires the event handler code whenever the mouse moves.

Animation.pause() - Web APIs
example animation.pause() is used many times in the alice in web animations api land growing/shrinking alice game, largely because animations created with the element.animate() method immediately start playing and must be paused manually if you want to avoid that: // animation of the cupcake slowly getting eaten up var nommingcake = document.getelementbyid('eat-me_sprite').animate( [ { transform: 'translatey(0)' }, { transform: 'translatey(-80%)' } ], { fill: 'forwards', easing: 'steps(4, end)', duration: alicechange.effect.timing.duration / 2 }); // doesn't actually need to be eaten until a click event, so pause it initially: nommingcake.pause(); additionally, when resetting : // an all-purpose function to pause the animations on alice, the cupcake, and the bottle that re...

Animation.persist() - Web APIs
examples in our simple replace indefinite animations demo, you can see the following code: const divelem = document.queryselector('div'); document.body.addeventlistener('mousemove', evt => { let anim = divelem.animate( { transform: `translate(${ evt.clientx}px, ${evt.clienty}px)` }, { duration: 500, fill: 'forwards' } ); anim.commitstyles(); //anim.persist() anim.onremove = function() { console.log('animation removed'); } console.log(anim.replacestate); }); here we have a <div> element, and an event listener that fires the event handler code whenever the mouse moves.

Animation.play() - Web APIs
two animation.play()s, one eventlistener: // the cake has its own animation: var nommingcake = document.getelementbyid('eat-me_sprite').animate( [ { transform: 'translatey(0)' }, { transform: 'translatey(-80%)' } ], { fill: 'forwards', easing: 'steps(4, end)', duration: alicechange.effect.timing.duration / 2 }); // pause the cake's animation so it doesn't play immediately.

Animation.replaceState - Web APIs
examples in our simple replace indefinite animations demo, you can see the following code: const divelem = document.queryselector('div'); document.body.addeventlistener('mousemove', evt => { let anim = divelem.animate( { transform: `translate(${ evt.clientx}px, ${evt.clienty}px)` }, { duration: 500, fill: 'forwards' } ); anim.commitstyles(); //anim.persist() anim.onremove = function() { console.log('animation removed'); } console.log(anim.replacestate); }); here we have a <div> element, and an event listener that fires the event handler code whenever the mouse moves.

Blob.stream() - Web APIs
call the returned stream's pipethrough() method to pipe the stream through a transformstream or any other readable and writable pair.

CSS.supports() - Web APIs
examples result = css.supports("text-decoration-style", "blink"); result = css.supports("display: flex"); result = css.supports("(--foo: red)"); result = css.supports(`(transform-style: preserve) or (-moz-transform-style: preserve) or (-o-transform-style: preserve) or (-webkit-transform-style: preserve)`); // result is true or false specification specification status comment css conditional rules module level 3the definition of 'css: supports()' in that specification.

CSSStyleValue - Web APIs
cssimagevalue csskeywordvalue cssnumericvalue csspositionvalue csstransformvalue cssunparsedvalue methods cssstylevalue.parse() sets a specific css property to the specified values and returns the first value as a cssstylevalue object.

CSS Object Model (CSSOM) - Web APIs
css typed object model cssimagevalue csskeywordvalue cssmathinvert cssmathmax cssmathmin cssmathnegate cssmathproduct cssmathsum cssmathvalue cssmatrixcomponent cssnumericarray cssnumericvalue cssperspective csspositionvalue cssrotate cssscale cssskew cssskewx cssskewy cssstylevalue csstransformcomponent csstransformvalue csstranslate cssunitvalue cssunparsedvalue cssvariablereferencevalue stylepropertymap stylepropertymapreadonly obsolete cssom interfaces cssprimitivevalue cssvalue cssvaluelist tutorials determining the dimensions of elements (it needs some updating as it was made in the dhtml/ajax era).

CanvasRenderingContext2D.drawWindow() - Web APIs
it will be scaled, rotated and so on according to the current transformation.

CanvasRenderingContext2D.getImageData() - Web APIs
this method is not affected by the canvas's transformation matrix.

CanvasRenderingContext2D.putImageData() - Web APIs
this method is not affected by the canvas transformation matrix.

CanvasRenderingContext2D.save() - Web APIs
the drawing state the drawing state that gets saved onto a stack consists of: the current transformation matrix.

CanvasRenderingContext2D.shadowBlur - Web APIs
this value doesn't correspond to a number of pixels, and is not affected by the current transformation matrix.

Basic animations - Web APIs
save the canvas state if you're changing any setting (such as styles, transformations, etc.) which affect the canvas state and you want to make sure the original state is used each time a frame is drawn, you need to save that original state.

Drawing shapes with canvas - Web APIs
path2d.addpath(path [, transform]) adds a path to the current path with an optional transformation matrix.

Canvas tutorial - Web APIs
in this tutorial basic usage drawing shapes applying styles and colors drawing text using images transformations compositing and clipping basic animations advanced animations pixel manipulation hit regions and accessibility optimizing the canvas finale ...

console - Web APIs
border and its longhand equivalents border-radius box-decoration-break box-shadow clear and float color cursor display font and its longhand equivalents line-height margin outline and its longhand equivalents padding text-* properties such as text-transform white-space word-spacing and word-break writing-mode note: the console message behaves like an inline element by default.

DOMMatrixReadOnly.flipX() - Web APIs
const flipped = document.getelementbyid('flipped'); const matrix = new dommatrixreadonly(); const flippedmatrix = matrix.flipx(); flipped.setattribute('transform', flippedmatrix.tostring()); screenshotlive sample specifications specification status comment geometry interfaces module level 1the definition of 'dommatrixreadonly.flipx()' in that specification.

DOMPoint.x - Web APIs
in general, positive values x mean to the right, and negative values of x means to the left, barring any transforms that may have altered the orientation of the axes.

DOMPoint.y - Web APIs
unless transforms have been applied to alter the orientation, the value of y increases downward and decreases upward.

DOMPoint.z - Web APIs
unless transforms have changed the orientation, a z of 0 is the plane of the screen, with positive values extending outward toward the user from the screen, and negative values receding into the distance behind the screen.

DOMPointInit.x - Web APIs
in general, positive values x mean to the right, and negative values of x means to the left, assuming that transforms have not altered the orientation of the axes.

DOMPointInit.y - Web APIs
this may change if transforms have been applied causing the axes' orientation to change.

DOMPointInit.z - Web APIs
of course, if transforms have been applied, the axes may have changed orientation.

DOMPointReadOnly.x - Web APIs
in general, positive values x mean to the right, and negative values of x means to the left, assuming no transforms have resulted in a reversal.

DOMPointReadOnly.y - Web APIs
in general, positive values of y mean downward, and negative values of y mean upward, assuming no transforms have resulted in a reversal.

DOMPointReadOnly.z - Web APIs
in general, positive values of z mean toward the user (out from the screen), and negative values of z mean away from the user (into the screen), assuming no transforms have resulted in a reversal.

DOMPointReadOnly - Web APIs
methods matrixtransform() applies a matrix transform specified as a dommatrixinit object to the dompointreadonly object.

DOMQuad - Web APIs
returning domquads lets getboxquads() return accurate information even when arbitrary 2d or 3d transforms are present.

Document: wheel event - Web APIs
lign-items: center; justify-content: center; } div { width: 105px; height: 105px; background: #cdf; padding: 5px; } function zoom(event) { event.preventdefault(); if (event.deltay < 0) { // zoom in scale *= event.deltay * -2; } else { // zoom out scale /= event.deltay * 2; } // restrict scale scale = math.min(math.max(.125, scale), 4); // apply scale transform el.style.transform = `scale(${scale})`; } let scale = 1; const el = document.queryselector('div'); document.onwheel = zoom; addeventlistener equivalent the event handler can also be set up using the addeventlistener() method: document.addeventlistener('wheel', zoom); specifications specification status comment ui eventsthe definition of 'wheel' in that specificat...

EffectTiming.direction - Web APIs
examples in the forgotten key example, alice waves her arm up and down by passing her an alternate value for her direction property: // get alice's arm, and wave it up and down document.getelementbyid("alice_arm").animate([ { transform: 'rotate(10deg)' }, { transform: 'rotate(-40deg)' } ], { easing: 'steps(2, end)', iterations: infinity, direction: 'alternate', duration: 600 }); specifications specification status comment web animationsthe definition of 'direction' in that specification.

EffectTiming.easing - Web APIs
examples in the red queen's race example, we animate alice and the red queen by passing an easing of steps(7, end) to animate(): // define the key frames var spriteframes = [ { transform: 'translatey(0)' }, { transform: 'translatey(-100%)' } ]; // get the element that represents alice and the red queen var redqueen_alice_sprite = document.getelementbyid('red-queen_and_alice_sprite'); // animate alice and the red queen using steps() var redqueen_alice = redqueen_alice_sprite.animate( spriteframes, { easing: 'steps(7, end)', direction: "reverse", duration: 600, playb...

EffectTiming.iterations - Web APIs
examples in the forgotten key example, alice waves her arm up and down the entire time the page is open by passing infinity as the value for her iterations property: // get alice's arm, and wave it up and down document.getelementbyid("alice_arm").animate([ { transform: 'rotate(10deg)' }, { transform: 'rotate(-40deg)' } ], { easing: 'steps(2, end)', iterations: infinity, direction: 'alternate', duration: 600 }); specifications specification status comment web animationsthe definition of 'iterations' in that specification.

Element: dblclick event - Web APIs
javascript const card = document.queryselector('aside'); card.addeventlistener('dblclick', function (e) { card.classlist.toggle('large'); }); html <aside> <h3>my card</h3> <p>double click to resize this object.</p> </aside> css aside { background: #fe9; border-radius: 1em; display: inline-block; padding: 1em; transform: scale(.9); transform-origin: 0 0; transition: transform .6s; } .large { transform: scale(1.3); } result specifications specification status ui eventsthe definition of 'dblclick' in that specification.

Element.getClientRects() - Web APIs
when called on svg elements other than an outer-<svg>, the "viewport" that the resulting rectangles are relative to is the viewport that the element's outer-<svg> establishes (and to be clear, the rectangles are also transformed by the outer-<svg>'s viewbox transform, if any).

Element: paste event - Web APIs
to override the default behavior (for example to insert some different data or a transformation of the clipboard contents) an event handler must cancel the default action using event.preventdefault(), and then insert its desired data manually.

Element.releasePointerCapture() - Web APIs
e me</div> css div { width: 140px; height: 50px; display: flex; align-items: center; justify-content: center; background: #fbe; } javascript function beginsliding(e) { slider.onpointermove = slide; slider.setpointercapture(e.pointerid); } function stopsliding(e) { slider.onpointermove = null; slider.releasepointercapture(e.pointerid); } function slide(e) { slider.style.transform = `translate(${e.clientx - 70}px)`; } const slider = document.getelementbyid('slider'); slider.onpointerdown = beginsliding; slider.onpointerup = stopsliding; result specifications specification status comment pointer events – level 2the definition of 'releasepointercapture' in that specification.

Element.setPointerCapture() - Web APIs
e me</div> css div { width: 140px; height: 50px; display: flex; align-items: center; justify-content: center; background: #fbe; } javascript function beginsliding(e) { slider.onpointermove = slide; slider.setpointercapture(e.pointerid); } function stopsliding(e) { slider.onpointermove = null; slider.releasepointercapture(e.pointerid); } function slide(e) { slider.style.transform = `translate(${e.clientx - 70}px)`; } const slider = document.getelementbyid('slider'); slider.onpointerdown = beginsliding; slider.onpointerup = stopsliding; result specifications specification status comment pointer events – level 2the definition of 'setpointercapture' in that specification.

Element: wheel event - Web APIs
div>scale me with your mouse wheel.</div> body { min-height: 100vh; margin: 0; display: flex; align-items: center; justify-content: center; } div { width: 105px; height: 105px; background: #cdf; padding: 5px; } function zoom(event) { event.preventdefault(); scale += event.deltay * -0.01; // restrict scale scale = math.min(math.max(.125, scale), 4); // apply scale transform el.style.transform = `scale(${scale})`; } let scale = 1; const el = document.queryselector('div'); el.onwheel = zoom; addeventlistener equivalent the event handler can also be set up using the addeventlistener() method: el.addeventlistener('wheel', zoom); specifications specification status comment ui eventsthe definition of 'wheel' in that specification.

GlobalEventHandlers.oncontextmenu - Web APIs
html <div class="shape">spinning</div> <p class="note" hidden>click to unpause.</p> css @keyframes spin { from { transform: rotate(0); } to { transform: rotate(1turn); } } .shape { width: 8em; height: 8em; display: flex; align-items: center; justify-content: center; animation: spin 18s linear infinite; background: lightsalmon; border-radius: 42%; margin: 1em; } .paused { background-color: #ddd; } .paused .shape { animation-play-state: paused; } javascript function pause(e) { bod...

GlobalEventHandlers.onmouseup - Web APIs
html <div class="container"> <div class="toaster"></div> <div class="toast">hello world!</div> </div> css .container { position: absolute; left: 50%; bottom: 20px; transform: translate(-50%); } .toaster { width: 160px; height: 110px; background: #bbb; border-radius: 10px 10px 0 0; } .toast { position: absolute; left: 50%; top: 50%; z-index: -1; width: 100px; height: 50px; padding: 10px; background: #ed9; border-radius: 10px 10px 0 0; transform: translate(-50%, -90px); transition: transform .3s; } .depressed { transform: translate(-5...

GlobalEventHandlers.ontransitioncancel - Web APIs
.box { margin-left: 70px; margin-top: 30px; border-style: solid; border-width: 1px; display: block; width: 100px; height: 100px; background-color: #0000ff; color: #ffffff; padding: 20px; font: bold 1.6em "helvetica", "arial", sans-serif; -webkit-transition: width 2s, height 2s, background-color 2s, -webkit-transform 2s, color 2s; transition: width 2s, height 2s, background-color 2s, transform 2s, color 2s; } .box:hover { background-color: #ffcccc; color: #000000; width: 200px; height: 200px; -webkit-transform: rotate(180deg); transform: rotate(180deg); } javascript next, we need to establish our event handlers to change the text content of the box when the transition begins and ends.

GlobalEventHandlers.ontransitionend - Web APIs
.box { margin-left: 70px; margin-top: 30px; border-style: solid; border-width: 1px; display: block; width: 100px; height: 100px; background-color: #0000ff; color: #ffffff; padding: 20px; font: bold 1.6em "helvetica", "arial", sans-serif; transition: width 2s, height 2s, background-color 2s, transform 2s, color 2s; } .box:hover { background-color: #ffcccc; color: #000000; width: 200px; height: 200px; transform: rotate(180deg); } javascript next, we need to establish our event handlers to change the text content of the box when the transition begins and ends.

GlobalEventHandlers.onwheel - Web APIs
html <div>scale me with your mouse wheel.</div> css body { min-height: 100vh; margin: 0; display: flex; align-items: center; justify-content: center; } div { width: 80px; height: 80px; background: #cdf; padding: 5px; transition: transform .3s; } javascript function zoom(event) { event.preventdefault(); if (event.deltay < 0) { // zoom in scale *= event.deltay * -2; } else { // zoom out scale /= event.deltay * 2; } // restrict scale scale = math.min(math.max(.125, scale), 4); // apply scale transform el.style.transform = `scale(${scale})`; } let scale = 1; const el = document.queryselector('di...

HTMLElement: animationcancel event - Web APIs
button class="activate" type="button">activate animation</button> <div class="event-log"></div> </div> css .container { height: 3rem; } .event-log { width: 25rem; height: 2rem; border: 1px solid black; margin: 0.2rem; padding: 0.2rem; } .animation.active { animation-duration: 2s; animation-name: slidein; animation-iteration-count: 2; } @keyframes slidein { from { transform: translatex(100%) scalex(3); } to { transform: translatex(0) scalex(1); } } js const animation = document.queryselector('p.animation'); const animationeventlog = document.queryselector('.animation-example>.event-log'); const applyanimation = document.queryselector('.animation-example>button.activate'); let iterationcount = 0; animation.addeventlistener('animationstart', () => { an...

HTMLElement: animationiteration event - Web APIs
button class="activate" type="button">activate animation</button> <div class="event-log"></div> </div> css .container { height: 3rem; } .event-log { width: 25rem; height: 2rem; border: 1px solid black; margin: 0.2rem; padding: 0.2rem; } .animation.active { animation-duration: 2s; animation-name: slidein; animation-iteration-count: 2; } @keyframes slidein { from { transform: translatex(100%) scalex(3); } to { transform: translatex(0) scalex(1); } } js const animation = document.queryselector('p.animation'); const animationeventlog = document.queryselector('.animation-example>.event-log'); const applyanimation = document.queryselector('.animation-example>button.activate'); let iterationcount = 0; animation.addeventlistener('animationstart', () => { an...

HTMLElement: animationstart event - Web APIs
button class="activate" type="button">activate animation</button> <div class="event-log"></div> </div> css .container { height: 3rem; } .event-log { width: 25rem; height: 2rem; border: 1px solid black; margin: 0.2rem; padding: 0.2rem; } .animation.active { animation-duration: 2s; animation-name: slidein; animation-iteration-count: 2; } @keyframes slidein { from { transform: translatex(100%) scalex(3); } to { transform: translatex(0) scalex(1); } } js const animation = document.queryselector('p.animation'); const animationeventlog = document.queryselector('.animation-example>.event-log'); const applyanimation = document.queryselector('.animation-example>button.activate'); let iterationcount = 0; animation.addeventlistener('animationstart', () => { an...

HTMLElement.innerText - Web APIs
html <h3>source element:</h3> <p id="source"> <style>#source { color: red; } #text { text-transform: uppercase; }</style> <span id=text>take a look at<br>how this text<br>is interpreted below.</span> <span style="display:none">hidden text</span> </p> <h3>result of textcontent:</h3> <textarea id="textcontentoutput" rows="6" cols="30" readonly>...</textarea> <h3>result of innertext:</h3> <textarea id="innertextoutput" rows="6" cols="30" readonly>...</textarea> javascript const source =...

HTMLElement: transitioncancel event - Web APIs
ent.queryselector('.transition'); transition.ontransitioncancel = () => { console.log('transition canceled'); }; live example in the following example, we have a simple <div> element, styled with a transition that includes a delay: <div class="transition"></div> <div class="message"></div> .transition { width: 100px; height: 100px; background: rgba(255,0,0,1); transition-property: transform background; transition-duration: 2s; transition-delay: 2s; } .transition:hover { transform: rotate(90deg); background: rgba(255,0,0,0); } to this, we'll add some javascript to indicate that the transitionstart, transitionrun, transitioncancel and transitionend events fire.

HTMLElement: transitionend event - Web APIs
eryselector('.transition'); transition.ontransitionend = () => { console.log('transition ended'); }; live example in the following example, we have a simple <div> element, styled with a transition that includes a delay: <div class="transition">hover over me</div> <div class="message"></div> .transition { width: 100px; height: 100px; background: rgba(255,0,0,1); transition-property: transform background; transition-duration: 2s; transition-delay: 1s; } .transition:hover { transform: rotate(90deg); background: rgba(255,0,0,0); } to this, we'll add some javascript to indicate that the transitionstart, transitionrun, transitioncancel and transitionend events fire.

HTMLElement: transitionrun event - Web APIs
('transition started running, and will start transitioning when the transition delay has expired'); }; live example in the following example, we have a simple <div> element, styled with a transition that includes a delay: <div class="transition">hover over me</div> <div class="message"></div> .transition { width: 100px; height: 100px; background: rgba(255,0,0,1); transition-property: transform, background; transition-duration: 2s; transition-delay: 1s; } .transition:hover { transform: rotate(90deg); background: rgba(255,0,0,0); } to this, we'll add some javascript to indicate where the transitionstart and transitionrun events fire.

HTMLElement: transitionstart event - Web APIs
ad of addeventlistener(): element.ontransitionrun = () => { console.log('started transitioning'); }; live example in the following example, we have a simple <div> element, styled with a transition that includes a delay: <div class="transition">hover over me</div> <div class="message"></div> .transition { width: 100px; height: 100px; background: rgba(255,0,0,1); transition-property: transform, background; transition-duration: 2s; transition-delay: 1s; } .transition:hover { transform: rotate(90deg); background: rgba(255,0,0,0); } to this, we'll add some javascript to indicate where the transitionstart and transitionrun events fire.

KeyframeEffect.KeyframeEffect() - Web APIs
examples in the follow the white rabbit example, the keyframeeffect constructor is used to create a set of keyframes that dictate how the white rabbit should animate down the hole: var rabbitdownkeyframes = new keyframeeffect( whiterabbit, // element to animate [ { transform: 'translatey(0%)' }, // keyframe { transform: 'translatey(100%)' } // keyframe ], { duration: 3000, fill: 'forwards' } // keyframe options ); specifications specification status comment web animations level 2the definition of 'keyframeeffectoptions.iterationcomposite' in that specification.

KeyframeEffect.setKeyframes() - Web APIs
for example, consider this simple animation — the keyframe object looks like so: let rotate360 = [ { transform: 'rotate(360deg)' } ]; we have only specified the end state of the animation, and the beginning state is implied.

KeyframeEffect.target - Web APIs
examples in the follow the white rabbit example, whiterabbit sets the target element to be animated: var whiterabbit = document.getelementbyid("rabbit"); var rabbitdownkeyframes = new keyframeeffect( whiterabbit, [ { transform: 'translatey(0%)' }, { transform: 'translatey(100%)' } ], { duration: 3000, fill: 'forwards' } ); // returns <div id=​"rabbit">​click the rabbit's ears!​</div>​ rabbitdownkeyframes.target; specifications specification status comment web animationsthe definition of 'keyframeeffect' in that specification.

KeyframeEffect - Web APIs
examples in the follow the white rabbit example, the keyframeeffect constructor is used to create a set of keyframes that dictate how the white rabbit should animate down the hole: var rabbitdownkeyframes = new keyframeeffect( whiterabbit, // element to animate [ { transform: 'translatey(0%)' }, // keyframe { transform: 'translatey(100%)' } // keyframe ], { duration: 3000, fill: 'forwards' } // keyframe options ); specifications specification status comment web animationsthe definition of 'keyframeeffect' in that specification.

KeyframeEffectOptions - Web APIs
for instance with transform, a translatex(-200px) would not override an earlier rotate(20deg) value but result in translatex(-200px) rotate(20deg).

NodeIterator.detach() - Web APIs
living standard transformed in a no-op document object model (dom) level 2 traversal and range specificationthe definition of 'nodeiterator.detach' in that specification.

ReadableStream.pipeTo() - Web APIs
examples // fetch the original image fetch('png-logo.png') // retrieve its body as readablestream .then(response => response.body) .then(body => body.pipethrough(new pngtransformstream())) .then(rs => rs.pipeto(new finaldestinationstream())) specifications specification status comment streamsthe definition of 'pipeto()' in that specification.

ReadableStream - Web APIs
readablestream.pipethrough() provides a chainable way of piping the current stream through a transform stream or any other writable/readable pair.

RequestDestination - Web APIs
"xslt" the target is an xlst transform.

SVGAElement - Web APIs
not _blank"); } } specifications specification status comment scalable vector graphics (svg) 2 candidate recommendation replaced inheritance from svgelement by svggraphicselement and removed the interface implementations of svgtests, svglangspace, svgexternalresourcesrequired, svgstylable, and svgtransformable by htmlhyperlinkelementutils scalable vector graphics (svg) 1.1 (second edition) recommendation initial definition ...

SVGAnimationElement - Web APIs
the svganimationelement interface is the base interface for all of the animation element interfaces: svganimateelement, svgsetelement, svganimatecolorelement, svganimatemotionelement and svganimatetransformelement.

SVGCircleElement - Web APIs
candidate recommendation replaced the inheritance from svgelement, svgtests, svglangspace, svgexternalresourcesrequired, svgstylable, and svgtransformable by svggeometryelement scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgcircleelement' in that specification.

SVGClipPathElement - Web APIs
candidate recommendation removed the inheritance from svgtests, svglangspace, svgexternalresourcesrequired, svgstylable, svgtransformable, and svgunittypes scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgclippathelement' in that specification.

SVGDefsElement - Web APIs
candidate recommendation replaced the inheritance from svgelementsvgtests, svglangspace, svgexternalresourcesrequired, svgstylable, and svgtransformable by svggraphicselement scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgdefselement' in that specification.

SVGForeignObjectElement - Web APIs
candidate recommendation replaced the inheritance from svgelement, svgtests, svglangspace, svgexternalresourcesrequired, svgstylable, and svgtransformable by svggraphicselement and svgurireference scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgforeignobjectelement' in that specification.

SVGGElement - Web APIs
candidate recommendation changed the inheritance from svgelement to svggraphicselement and removed the implemented interfaces svgtests, svglangspace, svgexternalresourcesrequired, svgstylable, and svgtransformable.

SVGGradientElement - Web APIs
svggradientelement.gradienttransform read only returns an svganimatedtransformlist corresponding to attribute gradienttransform on the given element.

SVGGraphicsElement: paste event - Web APIs
to override the default behavior (for example to insert some different data or a transformation of the clipboard contents) an event handler must cancel the default action using event.preventdefault(), and then insert its desired data manually.

SVGImageElement - Web APIs
candidate recommendation changed the inheritance from svgelement to svggraphicselement, removed the implemented interfaces svgtests, svglangspace, svgexternalresourcesrequired, svgstylable, and svgtransformable and added the crossorigin property.

SVGLineElement - Web APIs
candidate recommendation changed the inheritance from svgelement to svggeometryelement and removed the implemented interfaces svgtests, svglangspace, svgexternalresourcesrequired, svgstylable, and svgtransformable.

SVGMaskElement - Web APIs
candidate recommendation removed the implemented interfaces svgtests, svglangspace, svgexternalresourcesrequired, svgstylable, and svgtransformable.

SVGPolygonElement - Web APIs
candidate recommendation replaced the inheritance from svgelementsvgtests, svglangspace, svgexternalresourcesrequired, svgstylable, and svgtransformable by svggeometryelement scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgpolygonelement' in that specification.

SVGPolylineElement - Web APIs
candidate recommendation replaced the inheritance from svgelementsvgtests, svglangspace, svgexternalresourcesrequired, svgstylable, and svgtransformable by svggeometryelement scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgpolylineelement' in that specification.

SVGRectElement - Web APIs
candidate recommendation replaced the inheritance from svgelementsvgtests, svglangspace, svgexternalresourcesrequired, svgstylable, and svgtransformable by svggeometryelement scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgrectelement' in that specification.

SVGSwitchElement - Web APIs
candidate recommendation changed the inheritance from svgelement to svggraphicselement and removed the implemented interfaces svgtests, svglangspace, svgexternalresourcesrequired, svgstylable, and svgtransformable.

SVGTextElement - Web APIs
candidate recommendation removed the implemented interface svgtransformable.

Streams API - Web APIs
unpack chunks of a png: this example shows how pipethrough() can be used to transform a readablestream into a stream of other data types by transforming a data of a png file into a stream of png chunks.

SubtleCrypto.digest() - Web APIs
supported algorithms digest algorithms, also known as cryptographic hash functions, transform an arbitrarily large block of data into a fixed-size output, usually much shorter than the input.

Touch.radiusX - Web APIs
src.style.width = touch.radiusx * 2 + 'px'; src.style.height = touch.radiusy * 2 + 'px'; src.style.transform = "rotate(" + touch.rotationangle + "deg)"; }; specifications specification status comment touch events – level 2 draft non-stable version.

VisualViewport - Web APIs
bottombar.style.transform = 'translate(' + offsetleft + 'px,' + offsettop + 'px) ' + 'scale(' + 1/viewport.scale + ')' } window.visualviewport.addeventlistener('scroll', viewporthandler); window.visualviewport.addeventlistener('resize', viewporthandler); note: this technique should be used with care; emulating position: device-fixe...

WebGL2RenderingContext.beginQuery() - Web APIs
gl.transform_feedback_primitives_written: number of primitives that are written to transform feedback buffers.

WebGL2RenderingContext.copyBufferSubData() - Web APIs
gl.transform_feedback_buffer: buffer for transform feedback operations.

WebGL2RenderingContext.endQuery() - Web APIs
gl.transform_feedback_primitives_written: number of primitives that are written to transform feedback buffers.

WebGL2RenderingContext.getQuery() - Web APIs
gl.transform_feedback_primitives_written: number of primitives that are written to transform feedback buffers.

WebGLRenderingContext.disable() - Web APIs
when using a webgl 2 context, the following values are available additionally: constant description gl.rasterizer_discard deactivates that primitives are discarded immediately before the rasterization stage, but after the optional transform feedback stage.

WebGLRenderingContext.enable() - Web APIs
when using a webgl 2 context, the following values are available additionally: constant description gl.rasterizer_discard primitives are discarded immediately before the rasterization stage, but after the optional transform feedback stage.

WebGLRenderingContext.isEnabled() - Web APIs
when using a webgl 2 context, the following values are available additionally: constant description gl.rasterizer_discard primitives are discarded immediately before the rasterization stage, but after the optional transform feedback stage.

WebGLRenderingContext.viewport() - Web APIs
the webglrenderingcontext.viewport() method of the webgl api sets the viewport, which specifies the affine transformation of x and y from normalized device coordinates to window coordinates.

Raining rectangles - Web APIs
timer = settimeout(drawanimation, 17); } function playerclick (evt) { // we need to transform the position of the click event from // window coordinates to relative position inside the canvas.

Data in WebGL - Web APIs
they're used to provide values that will be the same for everything drawn in the frame, such as lighting positions and magnitudes, global transformation and perspective details, and so forth.

Rendering and the WebXR frame animation callback - Web APIs
kicking off the renderer thus looks like this: let worldrefspace; async function runxr(xrsession) { worldrefspace = await xrsession.requestreferencespace("immersive-vr"); if (worldrefspace) { viewerrefspace = worldrefspace.getoffsetreferencespace( new xrrigidtransform(viewerstartposition, viewerstartorientation)); animationframerequestid = xrsession.requestanimationframe(mydrawframe); } } after getting a reference space for the immersive world, this creates an offset reference space representing the position and orientation of the viewer by creating an xrrigidtransform representing that position and orientation, then calling the xrreferencespace method...

Keyframe Formats - Web APIs
for example, consider this simple animation — the keyframe object looks like so: let rotate360 = [ { transform: 'rotate(360deg)' } ]; we have only specified the end state of the animation, and the beginning state is implied.

Visualizations with Web Audio API - Web APIs
the analyser node will then capture audio data using a fast fourier transform (fft) in a certain frequency domain, depending on what you specify as the analysernode.fftsize property value (if no value is specified, the default is 2048.) note: you can also specify a minimum and maximum power value for the fft data scaling range, using analysernode.mindecibels and analysernode.maxdecibels, and different data averaging constants using analysernode.smoothingtimeconstant.

Window.requestAnimationFrame() - Web APIs
element.style.transform = 'translatex(' + math.min(0.1 * elapsed, 200) + 'px)'; if (elapsed < 2000) { // stop the animation after 2 seconds window.requestanimationframe(step); } } window.requestanimationframe(step); notes edge versions below 17 and internet explorer do not reliably fire requestanimationframe before the paint cycle.

WritableStream - Web APIs
see also whatwg stream visualiser, for a basic visualisation of readable, writable, and transform streams.

Using XMLHttpRequest - Web APIs
for didactic purposes here is a translation of the previous example transformed to use the formdata api.

XRHandedness - Web APIs
if gripspace is non-null, the function proceeds to get the pose for the gripspace transformed into the current reference space.

XRInputSource.handedness - Web APIs
if gripspace is non-null, the function proceeds to get the pose for the gripspace transformed into the current reference space.

XRInputSource.targetRaySpace - Web APIs
to determine the position and orientation of the target ray while rendering a frame, pass it into the xrframe method getpose() method, then use the returned xrpose object's transform to gather the spatial information you need.

XRInputSourceEvent() - Web APIs
xrsession.addeventlistener("select", event => { let targetraypose = event.frame.getpose(event.inputsource.targetrayspace, myrefspace); if (targetraypose) { let hit = myhittest(targetraypose.transform); if (hit) { /* handle the hit */ } } }); specifications specification status comment webxr device apithe definition of 'xrinputsourceevent' in that specification.

XRInputSourceEvent - Web APIs
xrsession.addeventlistener("select", event => { let targetraypose = event.frame.getpose(event.inputsource.targetrayspace, myrefspace); if (targetraypose) { let hit = myhittest(targetraypose.transform); if (hit) { /* handle the hit */ } } }); specifications specification status comment webxr device apithe definition of 'xrinputsourceevent' in that specification.

XRPose.emulatedPosition - Web APIs
the emulatedposition read-only attribute of the xrpose interface is a boolean value indicating whether or not both the the position component of the pose's transform is directly taken from the xr device, or it's simulated or computed based on other sources.

XRReferenceSpace: reset event - Web APIs
bubbles yes cancelable no interface xrreferencespaceevent event handler property onreset usage notes the reset event indicates that the coordinate system has been reset or reconfigured by changing the reference space's origin, moving and rotating it as indicated by the event's transform property.

XRReferenceSpaceEvent() - Web APIs
transform an xrrigidtransform which maps the old coordinate system (from before the changes indicated by this event) to the new coordiante system.

XRSession.onsqueezestart - Web APIs
xrsession.onsqueezestart = event => { if (event.inputsource.handedness == user.handedness) { let targetraypose = event.frame.getpose(event.inputsource.targetrayspace, myrefspace; if (targetraypose) { user.heldobject = findobjectusingray(targetraypose.transform); } } }; specifications specification status comment webxr device apithe definition of 'xrsession.onsqueezestart' in that specification.

XRViewerPose - Web APIs
also, when rendering the scene for spectators or other players in a multiplayer game, the transform of the xrviewerpose can be used to determine both placement and facing direction of the other players in the game, so that they can be drawn in the correct place with the correct facing.

::before (:before) - CSS: Cascading Style Sheets
css li { list-style-type: none; position: relative; margin: 2px; padding: 0.5em 0.5em 0.5em 2em; background: lightgrey; font-family: sans-serif; } li.done { background: #ccff99; } li.done::before { content: ''; position: absolute; border-color: #009933; border-style: solid; border-width: 0 0.3em 0.25em 0; height: 1em; top: 1.3em; left: 0.6em; margin-top: -1em; transform: rotate(45deg); width: 0.5em; } javascript var list = document.queryselector('ul'); list.addeventlistener('click', function(ev) { if (ev.target.tagname === 'li') { ev.target.classlist.toggle('done'); } }, false); here is the above code example running live.

::first-letter (:first-letter) - CSS: Cascading Style Sheets
round-blend-mode all margin properties: margin, margin-top, margin-right, margin-bottom, margin-left all padding properties: padding, padding-top, padding-right, padding-bottom, padding-left all border properties: the shorthands border, border-style, border-color, border-width, border-radius, border-image, and the longhands properties the color property the text-decoration, text-shadow, text-transform, letter-spacing, word-spacing (when appropriate), line-height, text-decoration-color, text-decoration-line, text-decoration-style, box-shadow, float, vertical-align (only if float is none) css properties syntax /* css3 syntax */ ::first-letter /* css2 syntax */ :first-letter examples simple drop cap in this example we will use the ::first-letter pseudo-element to create a simple drop cap e...

font-weight - CSS: Cascading Style Sheets
explanations understanding success criterion 1.4.8 | w3c understanding wcag 2.0 formal definition related at-rule@font-faceinitial valuenormalcomputed valueas specified formal syntax <font-weight-absolute>{1,2}where <font-weight-absolute> = normal | bold | <number <a href="/docs/css/value_definition_syntax#brackets" title="brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[1,1000]> examples setting normal font weight in a @font-face rule the following finds a local open sans font or import it, and allows using the font for normal font weights.

@keyframes - CSS: Cascading Style Sheets
syntax @keyframes slidein { from { transform: translatex(0%); } to { transform: translatex(100%); } } values <custom-ident> a name identifying the keyframe list.

grid - CSS: Cascading Style Sheets
neato!</p> css :not(.unknown) { color: lightgray; } @media (grid: 0) { .unknown { color: lightgray; } .bitmap { color: red; text-transform: uppercase; } } @media (grid: 1) { .unknown { color: lightgray; } .grid { color: black; text-transform: uppercase; } } result specifications specification status comment media queries level 4the definition of 'grid' in that specification.

prefers-reduced-motion - CSS: Cascading Style Sheets
*/ @media (prefers-reduced-motion) { .animation { animation-name: dissolve; } } .animation { background-color: #306; color: #fff; font: 1.2em sans-serif; width: 10em; padding: 1em; border-radius: 1em; text-align: center; } @keyframes pulse { 0% { transform: scale(1); } 25% { transform: scale(.9); } 50% { transform: scale(1); } 75% { transform: scale(1.1); } 100% { transform: scale(1); } } @keyframes dissolve { 0% { opacity: 1; } 50% { opacity: 0.8; } 100% { opacity: 1; } } result specifications specification status comment media queries level 5the definition of 'prefers-reduced-motion' in that speci...

update - CSS: Cascading Style Sheets
examples html <p>if this text animates for you, you are using a fast-updating device.</p> css @keyframes jiggle { from { transform: translatey(0); } to { transform: translatey(25px); } } @media (update: fast) { p { animation: 1s jiggle linear alternate infinite; } } result specifications specification status comment media queries level 4the definition of 'update' in that specification.

Coordinate systems - CSS: Cascading Style Sheets
it's actually possible to change the definitions and orientations of these coordinate systems using css properties such as transform.

Detecting CSS animation support - CSS: Cascading Style Sheets
if( animation === false ) { // animate in javascript fallback } else { elem.style[ animationstring ] = 'rotate 1s linear infinite'; var keyframes = '@' + keyframeprefix + 'keyframes rotate { '+ 'from {' + keyframeprefix + 'transform:rotate( 0deg ) }'+ 'to {' + keyframeprefix + 'transform:rotate( 360deg ) }'+ '}'; if( document.stylesheets && document.stylesheets.length ) { document.stylesheets[0].insertrule( keyframes, 0 ); } else { var s = document.createelement( 'style' ); s.innerhtml = keyframes; document.getelementsbytagname( 'head' )[ 0 ].appendchild( s ); ...

Relationship of flexbox to other layout methods - CSS: Cascading Style Sheets
this is because the items no longer have a float applied, as they have been transformed into flex items.

The stacking context - CSS: Cascading Style Sheets
element with any of the following properties with value other than none: transform filter perspective clip-path mask / mask-image / mask-border element with a isolation value isolate.

CSS Properties Reference - CSS: Cascading Style Sheets
padding-top paddingtop page-break-after pagebreakafter page-break-before pagebreakbefore position position stroke-dasharray strokedasharray stroke-dashoffset strokedashoffset stroke-width strokewidth text-align textalign text-decoration textdecoration text-indent textindent text-transform texttransform top top vertical-align verticalalign visibility visibility width width z-index zindex ...

CSS Text Decoration - CSS: Cascading Style Sheets
reference properties letter-spacing text-align text-decoration text-decoration-color text-decoration-line text-decoration-offset text-decoration-skip-ink text-decoration-style text-decoration-thickness text-emphasis text-emphasis-color text-emphasis-position text-emphasis-style text-indent text-rendering text-shadow text-transform white-space word-spacing guides none.

CSS data types - CSS: Cascading Style Sheets
stop> <color-stop-angle> <counter-style> <custom-ident> <dimension> <filter-function> <flex> <frequency> <frequency-percentage> <gradient> <ident> <image> <integer> <length> <length-percentage> <number> <number-percentage> <percentage> <position> <quote> <ratio> <resolution> <shape-box> <shape-radius> <string> <time> <time-percentage> <timing-function> <toggle-value> <transform-function> <type-or-unit> <url> <url-modifier> <zero> specifications specification status comment css values and units module level 4 editor's draft css values and units module level 3 candidate recommendation initial definition.

Animatable CSS properties - CSS: Cascading Style Sheets
scroll-padding-right scroll-padding-top scroll-snap-coordinate scroll-snap-destination scrollbar-color shape-image-threshold shape-margin shape-outside tab-size text-decoration text-decoration-color text-decoration-thickness text-emphasis text-emphasis-color text-indent text-shadow text-underline-offset top transform transform-origin translate vertical-align visibility width word-spacing z-index zoom ...

Grid wrapper - CSS: Cascading Style Sheets
lly centers the container } /* remove the max-width and margins if the browser supports grid */ @supports (display: grid) { .grid { display: grid; /* other grid code goes here */ max-width: none; margin: 0; } } to “break out” a full-width item to the edge of the viewport you can then use this trick (courtesy of una kravets): .item { width: 100vw; margin-left: 50%; transform: translate3d(-50%, 0, 0); } this gives a good approximation of the layout, only without the benefit of being able to align items easily on an exact grid.

Mozilla CSS extensions - CSS: Cascading Style Sheets
[prefixed version still accepted] -moz-perspective-origin [prefixed version still accepted] pointer-events [applying to more than svg] t–u -moz-tab-size -moz-text-align-lastobsolete since gecko 53 -moz-text-decoration-colorobsolete since gecko 39 -moz-text-decoration-lineobsolete since gecko 39 -moz-text-decoration-styleobsolete since gecko 39 -moz-text-size-adjust -moz-transform [prefixed version still accepted] -moz-transform-origin [prefixed version still accepted] -moz-transform-style [prefixed version still accepted] -moz-transition [prefixed version still accepted] -moz-transition-delay [prefixed version still accepted] -moz-transition-duration [prefixed version still accepted] -moz-transition-property [prefixed version still accepted] -moz-tran...

Pseudo-elements - CSS: Cascading Style Sheets
*/ p::first-line { color: blue; text-transform: uppercase; } note: in contrast to pseudo-elements, pseudo-classes can be used to style an element based on its state.

CSS reference - CSS: Cascading Style Sheets
ttab-sizetable-layout:targettarget-counter()target-counters()target-text()text-aligntext-align-lasttext-combine-uprighttext-decorationtext-decoration-colortext-decoration-linetext-decoration-skip-inktext-decoration-styletext-decoration-thicknesstext-emphasistext-emphasis-colortext-emphasis-positiontext-emphasis-styletext-indenttext-justifytext-orientationtext-overflowtext-renderingtext-shadowtext-transformtext-underline-offsettext-underline-position<time><time-percentage><timing-function>top@top-centertouch-actiontransformtransform-box<transform-function>transform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functiontranslatetranslate()translate3d()translatex()translatey()translatez()turnuunicode-bidiunicode-range (@font-face)unset<url>url()...

CSS Tutorials - CSS: Cascading Style Sheets
css transforms transforms allow you to change the position of elements by modifying their coordinate space: it allows for translating, rotating, and deforming them in the 2d or 3d spaces.

Value definition syntax - CSS: Cascading Style Sheets
component value combinators brackets brackets enclose several entities, combinators, and multipliers, then transform them as a single component.

Actual value - CSS: Cascading Style Sheets
finally, the used value is transformed according to the limitations of the local environment, resulting in the actual value.

<angle> - CSS: Cascading Style Sheets
it is used, for example, in <gradient>s and in some transform functions.

animation-timing-function - CSS: Cascading Style Sheets
puted valueas specifiedanimation typediscrete formal syntax <timing-function>#where <timing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function>where <cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number <a href="/docs/css/value_definition_syntax#brackets" title="brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[0,1]>, <number>, <number <a href="/docs/css/value_definition_syntax#brackets" title="brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[0,1]>, <number>)<step-timing-function> = step-start | step-end | steps(<integer>[, <step-position>]?)where <step-position> = jump-start | jump-end | jump-none | jump-both | start...

background-position - CSS: Cascading Style Sheets
see also background-position-x background-position-y background-position-inline background-position-block using multiple backgrounds transform-origin ...

element() - CSS: Cascading Style Sheets
<div style="width:400px; height:400px; background:-moz-element(#mybackground1) no-repeat;"> <p>this box uses the element with the #mybackground1 id as its background!</p> </div> <div style="overflow:hidden; height:0;"> <div id="mybackground1" style="width:1024px; height:1024px; background-image: linear-gradient(to right, red, orange, yellow, white);"> <p style="transform-origin:0 0; transform: rotate(45deg); color:white;">this text is part of the background.

font-language-override - CSS: Cascading Style Sheets
for example, a lot of fonts have a special character for the digraph fi that merge the dot on the "i" with the "f." however, if the language is set to turkish the typeface will likely know not to use the merged glyph; turkish has two versions of the "i," one with a dot (i) and one without (ı), and using the ligature would incorrectly transform a dotted "i" into a dotless "i." the font-language-override property lets you override the typeface behavior for a specific language.

font-variation-settings - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritedyescomputed valueas specifiedanimation typea transform formal syntax normal | [ <string> <number> ]# examples you can find a number of other variable fonts examples at our variable fonts guide, v-fonts.com, and axis-praxis.org.

font - CSS: Cascading Style Sheets
o ::first-letter and ::first-line.inheritedyespercentagesas each of the properties of the shorthand:font-size: refer to the parent element's font sizeline-height: refer to the font size of the element itselfcomputed valueas each of the properties of the shorthand:font-style: as specifiedfont-variant: as specifiedfont-weight: the keyword or the numerical value as specified, with bolder and lighter transformed to the real valuefont-stretch: as specifiedfont-size: as specified, but with relative lengths converted into absolute lengthsline-height: for percentage and length values, the absolute length, otherwise as specifiedfont-family: as specifiedanimation typeas each of the properties of the shorthand:font-style: discretefont-variant: discretefont-weight: a font weightfont-stretch: a font stretchfont...

image() - CSS: Cascading Style Sheets
list items with dir="rtl" set on the <li> or inheriting the right-to-left directionality from an ancestor, such as documents set to arabic or hebrew, will have the bullet display on the right, horizontally flippled, as if transform: scalex(-1) had been set.

mix-blend-mode - CSS: Cascading Style Sheets
4; padding: 1em; margin: .5em .5em 0; font: .8em sans-serif; text-align: left; white-space: nowrap; } .note + .row .cell { margin-top: 0; } .container { position: relative; background: linear-gradient(to right, #000 0%, transparent 50%, #fff 100%), linear-gradient(to bottom, #ff0 0%, #f0f 50%, #0ff 100%); width: 150px; height: 150px; margin: 0 auto; } .r { transform-origin: center; transform: rotate(-30deg); fill: url(#red); } .g { transform-origin: center; transform: rotate(90deg); fill: url(#green); } .b { transform-origin: center; transform: rotate(210deg); fill: url(#blue); } .isolate .group { isolation: isolate; } .normal .item { mix-blend-mode: normal; } .multiply .item { mix-blend-mode: multiply; } .screen .item { mix-...

offset-distance - CSS: Cascading Style Sheets
formal definition initial value0applies totransformable elementsinheritednopercentagesrefer to the total path lengthcomputed valuefor <length> the absolute value, otherwise a percentageanimation typea length, percentage or calc(); formal syntax <length-percentage>where <length-percentage> = <length> | <percentage> examples using offset-distance in an animation the motion aspect in css motion path typically comes from animating the offset-dist...

offset-position - CSS: Cascading Style Sheets
formal definition initial valueautoapplies totransformable elementsinheritednopercentagesrefertosizeofcontainingblockcomputed valuefor <length> the absolute value, otherwise a percentageanimation typea position formal syntax auto | <position>where <position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]?

offset - CSS: Cascading Style Sheets
set: url(circle.svg) 30deg; offset: url(circle.svg) 50px 20deg; /* including offset anchor */ offset: ray(45deg closest-side) / 40px 20px; offset: url(arc.svg) 2cm / 0.5cm 3cm; offset: url(arc.svg) 30deg / 50px 100px; formal definition initial valueas each of the properties of the shorthand:offset-position: autooffset-path: noneoffset-distance: 0offset-anchor: autooffset-rotate: autoapplies totransformable elementsinheritednopercentagesas each of the properties of the shorthand:offset-position: refertosizeofcontainingblockoffset-distance: refer to the total path lengthoffset-anchor: relativetowidthandheightcomputed valueas each of the properties of the shorthand:offset-position: for <length> the absolute value, otherwise a percentageoffset-path: as specifiedoffset-distance: for <length> the abs...

Guide to scroll anchoring - CSS: Cascading Style Sheets
these suppression triggers are changes to the computed value of any of the following properties: top, left, right, or bottom margin or padding any width or height-related properties transform additionally, position changes anywhere inside the scrolling box also disable scroll anchoring.

radial-gradient() - CSS: Cascading Style Sheets
syntax /* a gradient at the center of its container, starting red, changing to blue, and finishing green */ radial-gradient(circle at center, red 0, blue, green 100%) values <position> the position of the gradient, interpreted in the same way as background-position or transform-origin.

repeating-radial-gradient() - CSS: Cascading Style Sheets
top left of its container, starting red, changing to green and back again, repeating five times between the center and the bottom right corner, and only once between the center and the top left corner */ repeating-radial-gradient(farthest-corner at 20% 20%, red 0, green, red 20%); values <position> the position of the gradient, interpreted in the same way as background-position or transform-origin.

scroll-margin-block-end - CSS: Cascading Style Sheets
the scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container’s coordinate space), then adding the specified outsets.

scroll-margin-block-start - CSS: Cascading Style Sheets
the scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container’s coordinate space), then adding the specified outsets.

scroll-margin-block - CSS: Cascading Style Sheets
the scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container’s coordinate space), then adding the specified outsets.

scroll-margin-bottom - CSS: Cascading Style Sheets
the scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container’s coordinate space), then adding the specified outsets.

scroll-margin-inline-end - CSS: Cascading Style Sheets
the scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container’s coordinate space), then adding the specified outsets.

scroll-margin-inline-start - CSS: Cascading Style Sheets
the scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container’s coordinate space), then adding the specified outsets.

scroll-margin-inline - CSS: Cascading Style Sheets
the scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container’s coordinate space), then adding the specified outsets.

scroll-margin-left - CSS: Cascading Style Sheets
the scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container’s coordinate space), then adding the specified outsets.

scroll-margin-right - CSS: Cascading Style Sheets
the scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container’s coordinate space), then adding the specified outsets.

scroll-margin-top - CSS: Cascading Style Sheets
the scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container’s coordinate space), then adding the specified outsets.

scroll-margin - CSS: Cascading Style Sheets
the scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container’s coordinate space), then adding the specified outsets.

scroll-snap-coordinate - CSS: Cascading Style Sheets
/* keyword value */ scroll-snap-coordinate: none; /* <position> values */ scroll-snap-coordinate: 50px 50px; /* single coordinate */ scroll-snap-coordinate: 100px 100px, 100px bottom; /* multiple coordinates */ /* global values */ scroll-snap-coordinate: inherit; scroll-snap-coordinate: initial; scroll-snap-coordinate: unset; if the element has been transformed, the snap coordinates are likewise transformed, thus aligning the snap points with the element as it is displayed.

text-decoration - CSS: Cascading Style Sheets
candidate recommendation transformed into a shorthand property.

text-underline-position - CSS: Cascading Style Sheets
aliquam accumsan tellus ac erat posuere.</p> our css looks like this: p { font-size: 1.5rem; text-transform: capitalize; text-decoration: underline; text-decoration-thickness: 2px; } .horizontal { text-underline-position: under; } .vertical { writing-mode: vertical-rl; text-underline-position: left; } in this example we set both the paragraphs to have a thick underline.

transition-timing-function - CSS: Cascading Style Sheets
puted valueas specifiedanimation typediscrete formal syntax <timing-function>#where <timing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function>where <cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number <a href="/docs/css/value_definition_syntax#brackets" title="brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[0,1]>, <number>, <number <a href="/docs/css/value_definition_syntax#brackets" title="brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[0,1]>, <number>)<step-timing-function> = step-start | step-end | steps(<integer>[, <step-position>]?)where <step-position> = jump-start | jump-end | jump-none | jump-both | start...

transition - CSS: Cascading Style Sheets
| <timing-function> | <time>where <single-transition-property> = all | <custom-ident><timing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function>where <cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number <a href="/docs/css/value_definition_syntax#brackets" title="brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[0,1]>, <number>, <number <a href="/docs/css/value_definition_syntax#brackets" title="brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[0,1]>, <number>)<step-timing-function> = step-start | step-end | steps(<integer>[, <step-position>]?)where <step-position> = jump-start | jump-end | jump-none | jump-both | start...

EXSLT
for example, to use the regular expressions package: <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/xsl/transform" xmlns:regexp="http://exslt.org/regular-expressions"> <xsl:template match="/"> ...

Making content editable - Developer guides
by using some javascript event handlers, you can transform your web page into a full and fast rich text editor.

Constraint validation - Developer guides
note that most input types don't have intrinsic constraints, as some are simply barred from constraint validation or have a sanitization algorithm transforming incorrect values to a correct default.

HTML5 - Developer guides
the contenteditable attribute: transform your website to a wiki!

Index - Developer guides
26 using device orientation with 3d transforms advanced, css, dom, needsupdate, orientation, transforms this article provides tips on how to use device orientation information in tandem with css 3d transforms.

HTML attribute reference - HTML: Hypertext Markup Language
the idl attribute is always going to use (but might transform) the underlying content attribute to return a value when you get it and is going to save something in the content attribute when you set it.

Warning - HTTP
199 miscellaneous warning arbitrary, non-specific warning 214 transformation applied added by a proxy if it applies any transformation to the representation, such as changing the content-coding, media-type or the like.

X-Content-Type-Options - HTTP
this header was introduced by microsoft in ie 8 as a way for webmasters to block content sniffing that was happening and could transform non-executable mime types into executable mime types.

HTTP Index - HTTP
224 203 non-authoritative information http, http status code, reference, status code, successful response the http 203 non-authoritative information response status indicates that the request was successful but the enclosed payload has been modified by a transforming proxy from that of the origin server's 200 (ok) response .

Using Promises - JavaScript
a reusable compose function, which is common in functional programming: const applyasync = (acc,val) => acc.then(val); const composeasync = (...funcs) => x => funcs.reduce(applyasync, promise.resolve(x)); the composeasync() function will accept any number of functions as arguments, and will return a new function that accepts an initial value to be passed through the composition pipeline: const transformdata = composeasync(func1, func2, func3); const result3 = transformdata(data); in ecmascript 2017, sequential composition can be done more simply with async/await: let result; for (const f of [func1, func2, func3]) { result = await f(result); } /* use last result (i.e.

JSON.stringify() - JavaScript
eens.push({ 'name': 'screend', 'width': 250, 'height': 60 }); session.screens.push({ 'name': 'screene', 'width': 390, 'height': 120 }); session.screens.push({ 'name': 'screenf', 'width': 1240, 'height': 650 }); // converting the json string with json.stringify() // then saving with localstorage in the name of session localstorage.setitem('session', json.stringify(session)); // example of how to transform the string generated through // json.stringify() and saved in localstorage in json object again var restoredsession = json.parse(localstorage.getitem('session')); // now restoredsession variable contains the object that was saved // in localstorage console.log(restoredsession); well-formed json.stringify() engines implementing the well-formed json.stringify specification will stringify lone s...

JSON - JavaScript
static methods json.parse(text[, reviver]) parse the string text as json, optionally transform the produced value and its properties, and return the value.

Map - JavaScript
[key, value] of mymap.entries()) { console.log(key + ' = ' + value) } // 0 = zero // 1 = one iterating map with foreach() maps can be iterated using the foreach() method: mymap.foreach(function(value, key) { console.log(key + ' = ' + value) }) // 0 = zero // 1 = one relation with array objects let kvarray = [['key1', 'value1'], ['key2', 'value2']] // use the regular map constructor to transform a 2d key-value array into a map let mymap = new map(kvarray) mymap.get('key1') // returns "value1" // use array.from() to transform a map into a 2d key-value array console.log(array.from(mymap)) // will show you exactly the same array as kvarray // a succinct way to do the same, using the spread syntax console.log([...mymap]) // or use the keys() or values() iterators, and convert them to an ...

Math - JavaScript
since humans tend to think in degrees, and some functions (such as css transforms) can accept degrees, it is a good idea to keep functions handy that convert between the two: function degtorad(degrees) { return degrees * (math.pi / 180); }; function radtodeg(rad) { return rad / (math.pi / 180); }; calculating the height of an equalateral triangle if we want to calculate the height of an equalateral triangle, and we know its side length is 100, we can use the formulae ...

Set - JavaScript
c = new set([3, 4, 5, 6]) issuperset(seta, setb) // => true union(seta, setc) // => set [1, 2, 3, 4, 5, 6] intersection(seta, setc) // => set [3, 4] symmetricdifference(seta, setc) // => set [1, 2, 5, 6] difference(seta, setc) // => set [1, 2] relation with array objects let myarray = ['value1', 'value2', 'value3'] // use the regular set constructor to transform an array into a set let myset = new set(myarray) myset.has('value1') // returns true // use the spread operator to transform a set into an array.