Funksjonen skewX

Funksjonen skewX setter skjevningen av et element langs X-aksen, og forvandler det dermed til et parallellogram. Brukes sammen med egenskapen transform. Verdien til egenskapen er en vinkel i alle enheter for vinkler. Vinkelen kan være både positiv og negativ. En positiv verdi gjør skjevningen til venstre, negativ - til høyre. Skjevningen utføres rundt punktet angitt av egenskapen transform-origin.

Syntaks

cssvelger {
  transform: skewX(vinkel);
}

Eksempel

I dette eksemplet er boksen skjevnet med 30 grader til venstre:

html<div id="elem">lorem ipsum</div>
css#elem {
  transform: skewX(30deg);
  border: 1px solid black;
  width: 100px;
  height: 50px;
}

Результат:

Eksempel

I dette eksemplet er boksen skjevnet med 30 grader til høyre:

html<div id="elem">lorem ipsum</div>
css#elem {
  transform: skewX(-30deg);
  border: 1px solid black;
  width: 100px;
  height: 50px;
}

Результат:

Se også

  • funksjonen skew,
    som setter skjevning langs både X- og Y-aksene
  • funksjonen skewY,
    som setter skjevning langs Y-aksen