skewX-funksie

Die skewX funksie spesifiseer die skew van 'n element om die X-as, wat dit sodoende in 'n parallelogram omskep. Dit word saam gebruik met die transform eienskap. Die waarde van die eienskap is 'n hoek in enige hoeke-eenhede. Die hoek kan positief of negatief wees. 'n Positiewe waarde skew die element na links, 'n negatiewe waarde - na regs. Die skew vind plaas om die punt wat deur die transform-origin eienskap gespesifiseer word.

Sintaksis

cssselektor {
  transform: skewX(hoek);
}

Voorbeeld

In hierdie voorbeeld is die blok 30 grade na links geskew:

html<div id="elem">lorem ipsum</div>

css#elem {
  transform: skewX(30deg);
  border: 1px solid black;
  width: 100px;
  height: 50px;
}

Результат:

Voorbeeld

In hierdie voorbeeld is die blok 30 grade na regs geskew:

html<div id="elem">lorem ipsum</div>

css#elem {
  transform: skewX(-30deg);
  border: 1px solid black;
  width: 100px;
  height: 50px;
}

Результат:

Sien ook