skewY() - CSS: Cascading Style Sheets
the skewy() css function defines a transformation that skews an element in the vertical direction on the 2d plane.
... syntax skewy(a) values a is an <angle> representing the angle to use to distort the element along the ordinate.
...mogeneous 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.

SVGTransform - Web APIs
interface overview also implement none methods void setmatrix(in svgmatrix matrix) void settranslate(in float tx, in float ty) void setscale(in float sx, in float sy) void setrotate(in float angle, in float cx, in float cy) void setskewx(in float angle) void setskewy(in float angle) properties readonly unsigned short type readonly float angle readonly svgmatrix matrix constants svg_transform_unknown = 0 svg_transform_matrix = 1 svg_transform_translate = 2 svg_transform_scale = 3 svg_transform_rotate = 4 svg_transform_skewx = 5 svg_transform_skewy = 6 ...
... svg_transform_matrix 1 a matrix(…) transformation svg_transform_translate 2 a translate(…) transformation svg_transform_scale 3 a scale(…) transformation svg_transform_rotate 4 a rotate(…) transformation svg_transform_skewx 5 a skewx(…) transformation svg_transform_skewy 6 a skewy(…) transformation properties name type description type unsigned short the type of the value as specified by one of the svg_transform_* constants defined on this interface.
... angle float a convenience attribute for svg_transform_rotate, svg_transform_skewx and svg_transform_skewy.
...And 2 more matches

transform - CSS: Cascading Style Sheets
: 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; transform: unset; the transform property may be specified as either the keyword value none or as one or more <transform-function> values.
...unding boxcomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typea transformcreates stacking contextyes formal syntax none | <transform-list>where <transform-list> = <transform-function>+where <transform-function> = <matrix()> | <translate()> | <translatex()> | <translatey()> | <scale()> | <scalex()> | <scaley()> | <rotate()> | <skew()> | <skewx()> | <skewy()> | <matrix3d()> | <translate3d()> | <translatez()> | <scale3d()> | <scalez()> | <rotate3d()> | <rotatex()> | <rotatey()> | <rotatez()> | <perspective()>where <matrix()> = matrix( <number>#{6} )<translate()> = translate( <length-percentage> , <length-percentage>?
...)<skewx()> = skewx( [ <angle> | <zero> ] )<skewy()> = skewy( [ <angle> | <zero> ] )<matrix3d()> = matrix3d( <number>#{16} )<translate3d()> = translate3d( <length-percentage> , <length-percentage> , <length> )<translatez()> = translatez( <length> )<scale3d()> = scale3d( <number> , <number> , <number> )<scalez()> = scalez( <number> )<rotate3d()> = rotate3d( <number> , <number> , <number> , [ <angle> | <zero> ] )<rotatex()> = rotatex( [ <angle> | <zero> ] )<rotatey()> = rotatey( [ <angle> | <z...

<transform-function> - CSS: Cascading Style Sheets
skewy() skews an element in the vertical direction.
... <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> <option>matrix(1, 2, -1, 1, 80, 80)</option> <option>matrix3d(1,0,0,0,0,1,3,0,0,0,1,0,50,100,0,1.1)</optio...

transform - SVG: Scalable Vector Graphics
example html,body,svg { height:100% } <svg viewbox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"> <rect x="-3" y="-3" width="6" height="6" /> <rect x="-3" y="-3" width="6" height="6" fill="red" transform="skewx(30)" /> </svg> skewy the skewy(<a>) transform function specifies a skew transformation along the y axis by a degrees.
... example html,body,svg { height:100% } <svg viewbox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"> <rect x="-3" y="-3" width="6" height="6" /> <rect x="-3" y="-3" width="6" height="6" fill="red" transform="skewy(30)" /> </svg> specification specification status comment css transforms level 2the definition of 'transform' in that specification.

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

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).

DOMMatrix - Web APIs
dommatrix.skewyself() modifies the matrix by applying the specified skew transformation along the y-axis.

DOMMatrixReadOnly - Web APIs
dommatrixreadonly.skewy() returns a new dommatrix created by applying the specified skew transformation to the source matrix along its y-axis.

SVGMatrix - Web APIs
svgmatrix.skewy() post-multiplies a skewy transformation on the current matrix and returns the resulting matrix as svgmatrix.

CSS reference - CSS: Cascading Style Sheets
-padding-blockscroll-padding-block-endscroll-padding-block-startscroll-padding-bottomscroll-padding-inlinescroll-padding-inline-endscroll-padding-inline-startscroll-padding-leftscroll-padding-rightscroll-padding-topscroll-snap-alignscroll-snap-stopscroll-snap-typescrollbar-colorscrollbar-width::selectionselector()sepia()<shape>shape-image-thresholdshape-marginshape-outsidesize (@page)skew()skewx()skewy()::slottedspeak-as (@counter-style)src (@font-face)steps()<string>@stylesetstyleset()@stylisticstylistic()suffix (@counter-style)@supports@swashswash()symbols (@counter-style)symbols()system (@counter-style)ttab-sizetable-layout:targettarget-counter()target-counters()target-text()text-aligntext-align-lasttext-combine-uprighttext-decorationtext-decoration-colortext-decoration-linetext-decoration-s...

matrix() - CSS: Cascading Style Sheets
cartesian coordinates on ℝ2 homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 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 o...

transform-origin - CSS: Cascading Style Sheets
transform: skewx(50deg); transform-origin: 100% -30%; <div class="box9">&nbsp;</div> .box9 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform: skewx(50deg); -webkit-transform: skewx(50deg); transform-origin: 100% -30%; -webkit-transform-origin: 100% -30%; } transform: skewy(50deg); transform-origin: 100% -30%; <div class="box10">&nbsp;</div> .box10 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform: skewy(50deg); -webkit-transform: skewy(50deg); transform-origin: 100% -30%; -webkit-transform-origin: 100% -30%; } specifications specification status co...

type - SVG: Scalable Vector Graphics
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) for the <fefuncr>, <fefuncg>, <fefuncb>, and <fefunca> elements categories none ...

SVG 2 support in Mozilla - SVG: Scalable Vector Graphics
tatus unknown geometry change notes x and y attributes removed from <pattern> and <filter> implementation status unknown auto value of width and height computes to 0 but 100% on <svg> not implemented coordinate systems, transformations and units change notes exception for bad values on svgmatrix.skewx() and svgmatrix.skewy() implementation status unknown bounding box for element with no position at (0, 0) implementation status unknown defer keyword removed from preserveaspectratio attribute removed (bug 1280425) added non-scaling-size, non-rotation and fixed-position keywords for vector-effect property not implemented yet (bug 1318208) vector-effect has no effect with...