scale3d() - CSS: Cascading Style Sheets
because the amount of scaling is defined by a vector, it can resize different dimensions at different scales. its result is a <transform-function> data type. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. this scaling transformation is characterized by a three-dimensional vector. its coordinates define how much scaling is done in each direction. if all three coordinates are equal, the scaling is uniform (isotropic) and the aspect ratio of the element is preserved (this is a homothetic transformation). ...
... direction. if all three coordinates are equal, the scaling is uniform (isotropic) and the aspect ratio of the element is preserved (this is a homothetic transformation). when a coordinate value is outside the [-1, 1] range, the element grows along that dimension; when inside, it shrinks. if it is negative, the result a point reflection in that dimension. a value of 1 has no effect. syntax the scale3d() function is specified with three values, which represent the amount of scaling to be applied in each direction. scale3d(sx, sy, sz) values sx is a <number> representing the abscissa of the scaling vector. sy is a <number> representing the ordinate of the scaling vector. sz is a <number> representing the z-component of the scaling vector. cartesian coordinates on ℝ2 ho...
... homogeneous coordinates on ℝℙ3 this transformation applies to the 3d space and can't be represented on the plane. ...
...And 2 more matches

transform - CSS: Cascading Style Sheets
0, 0, 1, 0, 0, 0, 0, 1); transform: perspective(17px); transform: rotate(0.5turn); transform: rotate3d(1, 2.0, 3.0, 10deg); transform: rotatex(10deg); transform: rotatey(10deg); transform: rotatez(10deg); transform: translate(12px, 50%); transform: translate3d(12px, 50%, 3em); transform: translatex(2em); transform: translatey(3in); transform: translatez(2px); transform: scale(2, 0.5); transform: scale3d(2.5, 1.2, 0.3); transform: scalex(2); transform: scaley(0.5); transform: scalez(0.3); transform: skew(30deg, 20deg); transform: skewx(30deg); transform: skewy(1.07rad); /* multiple function values */ transform: translatex(10px) rotate(10deg) translatey(5px); transform: perspective(500px) translate(10px, 0, 20px) rotatey(3deg); /* global values */ transform: inherit; transform: initial; transfor...
...)<translatex()> = translatex( <length-percentage> )<translatey()> = translatey( <length-percentage> )<scale()> = scale( <number> , <number>? )<scalex()> = scalex( <number> )<scaley()> = scaley( <num...
...alex( <number> )<scaley()> = scaley( <number> )<rotate()> = rotate( [ <angle> | <zero> ] )<skew()> = skew( [ <angle> | <zero> ] , [ <angle> | <zero> ]? ...
...> )<scaley()> = scaley( <number> )<rotate()> = rotate( [ <angle> | <zero> ] )<skew()> = skew( [ <angle> | <zero> ] , [ <angle> | <zero> ]? ...

<transform-function> - CSS: Cascading Style Sheets
plane. rotation rotate() rotates an element around a fixed point on the 2d plane. rotate3d() rotates an element around a fixed axis in 3d space. rotatex() rotates an element around the horizontal axis. rotatey() rotates an element around the vertical axis. rotatez() rotates an element around the z-axis. scaling (resizing) scale() scales an element up or down on the 2d plane. scale3d() scales an element up or down in 3d space. scalex() scales an element up or down horizontally. scaley() scales an element up or down vertically. scalez() scales an element up or down along the z-axis. skewing (distortion) skew() skews an element on the 2d plane. skewx() skews an element in the horizontal direction. skewy() skews an element in the vertical direction. translatio...
...<option selected>choose a function</option> <option>rotate(360deg)</option> <option>rotatex(360deg)</option> <option>rotatey(360deg)</option> <option>rotatez(360deg)</option> <option>rotate3d(1, 1, 1, 90deg)</option> <option>scale(1.5)</option> <option>scalex(1.5)</option> <option>scaley(1.5)</option> <option>scalez(1.5)</option> <option>scale3d(1, 1.5, 1.5)</option> <option>skew(17deg, 13deg)</option> <option>skewx(17deg)</option> <option>skewy(17deg)</option> <option>translate(100px, 100px)</option> <option>translatex(100px)</option> <option>translatey(100px)</option> <option>translatez(100px)</option> <option>translate3d(50px, 50px, 50px)</option> <option>perspective(200px)</option...

CSS3 - Archive of obsolete content
ix(), translate(), translatex(), translatey(), scale(), scalex(), scaley(), rotate(), skewx(), and skewy(). the support of tri-dimensional transforms to be applied to any element by adding the css transform-style, perspective, perspective-origin, and backface-visibility properties and extended the transform property with the following transforms are: matrix 3d(), translate3d(), translatez(), scale3d(), scalez(), rotate3d(), rotatex(), rotatey(), rotatez(), and perspective(). note: this specification is a merge of css 2d-transforms, css 3d-transforms and svg transforms. css transitions working draft allows the definition of transitions effects between two properties values by adding the css transition, transition-delay, transition-duration, transitio...

DOMMatrix - Web APIs
axes' scaling factors are both 1, but the scaling factor for x must be specified. the default origin is (0, 0, 0). returns itself. dommatrix.scaleself() modifies the matrix by applying the specified scaling factors, with the center located at the specified origin. also returns itself. by default, the scaling factor is 1 for all three axes, and the origin is (0, 0, 0). returns itself. dommatrix.scale3dself() modifies the matrix by applying the specified scaling factor to all three axes, centered on the given origin. returns itself. dommatrix.rotateself() modifies the matrix by rotating itself around each axis by the specified number of degrees. returns itself. dommatrix.rotateaxisangleself() modifies the matrix by rotating it by the specified angle around the given vector. returns itself. ...

DOMMatrixReadOnly - Web APIs
cified vector and (1, 0). the original matrix is not modified. dommatrixreadonly.scale() returns a new dommatrix created by scaling the source matrix by the amount specified for each axis, centered on the given origin. by default, the x and z axes are scaled by 1 and the y axis has no default scaling value. the default origin is (0, 0, 0). the original matrix is not modified. dommatrixreadonly.scale3d() returns a new dommatrix created by scaling the source 3d matrix by the given factor along all its axes, centered on the specified origin point. the default origin is (0, 0, 0). the original matrix is not modified. dommatrixreadonly.scalenonuniform() returns a new dommatrix created by applying the specified scaling on the x, y, and z axes, centered at the given origin. by default, the y and...

CSS reference - CSS: Cascading Style Sheets
temsplace-self::placeholderpointer-eventspolygon()<position>positionprefix (@counter-style)ptpxqqquotesrradradial-gradient()range (@counter-style)<ratio>:read-only:read-writerect()remrepeat()repeating-linear-gradient()repeating-radial-gradient():requiredresize<resolution>revertrgb()rgba():rightright@right-bottom:rootrotaterotate()rotate3d()rotatex()rotatey()rotatez()row-gapsssaturate()scalescale()scale3d()scalex()scaley()scalez():scopescroll-behaviorscroll-marginscroll-margin-blockscroll-margin-block-endscroll-margin-block-startscroll-margin-bottomscroll-margin-inlinescroll-margin-inline-endscroll-margin-inline-startscroll-margin-leftscroll-margin-rightscroll-margin-topscroll-paddingscroll-padding-blockscroll-padding-block-endscroll-padding-block-startscroll-padding-bottomscroll-padding-inlinescr...

scale - CSS: Cascading Style Sheets
a scale() (2d scaling) function with a single value specified. two length/percentage values two <number>s that specify the x and y axis scaling values (respectively) of a 2d scale. equivalent to a scale() (2d scaling) function with two values specified. three length/percentage values three <number>s that specify the x, y, and z axis scaling values (respectively) of a 3d scale. equivalent to a scale3d() (3d scaling) function. none specifies that no scaling should be applied. 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;...

scale() - CSS: Cascading Style Sheets
aling is uniform (isotropic) and the aspect ratio of the element is preserved (this is a homothetic transformation). when a coordinate value is outside the [-1, 1] range, the element grows along that dimension; when inside, it shrinks. if it is negative, the result a point reflection in that dimension. a value of 1 has no effect. note: the scale() function only scales in 2d. to scale in 3d, use scale3d() instead. syntax the scale() function is specified with either one or two values, which represent the amount of scaling to be applied in each direction. scale(sx) scale(sx, sy) values sx a <number> representing the abscissa of the scaling vector. sy a <number> representing the ordinate of the scaling vector. if not defined, its default value is sx, resulting in a uniform scaling that...

scaleX() - CSS: Cascading Style Sheets
of each element point by a constant factor, except when the scale factor is 1, in which case the function is the identity transform. the scaling is not isotropic, and the angles of the element are not conserved. scalex(-1) defines an axial symmetry, with a vertical axis passing through the origin (as specified by the transform-origin property). note: scalex(sx) is equivalent to scale(sx, 1) or scale3d(sx, 1, 1). syntax scalex(s) values s is a <number> representing the scaling factor to apply on the abscissa of each point of the element. cartesian coordinates on ℝ2 homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 s0 01 s00010001 s00010001 s000010000100001 [s 0 0 1 0 0]...

scaleY() - CSS: Cascading Style Sheets
f each element point by a constant factor, except when the scale factor is 1, in which case the function is the identity transform. the scaling is not isotropic, and the angles of the element are not conserved. scaley(-1) defines an axial symmetry, with a horizontal axis passing through the origin (as specified by the transform-origin property). note: scaley(sy) is equivalent to scale(1, sy) or scale3d(1, sy, 1). transform: rotatex(180deg); === transform: scaley(-1); syntax scaley(s) values s is a <number> representing the scaling factor to apply on the ordinate of each point of the element. cartesian coordinates on ℝ2 homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 10 0s 1000s0001 10...

scaleZ() - CSS: Cascading Style Sheets
onserved. scalez(-1) defines an axial symmetry, with the z-axis passing through the origin (as specified by the transform-origin property). 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. note: scalez(sz) is equivalent to to scale3d(1, 1, sz). syntax scalez(s) values s is a <number> representing the scaling factor to apply on the z-coordinate of each point of the element. cartesian coordinates on ℝ2 homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 this transformation applies to the 3d space and can't be represented on the plane. ...