Funksjonen skew

Funksjonen skew setter skjevheten til et element, og forvandler det dermed fra et rektangel til et parallellogram. Brukes sammen med egenskapen transform. Verdien til egenskapen er en vinkel i alle vinkelenheter. Skjevheten utføres rundt punktet som er satt av egenskapen transform-origin.

Kan ta én eller to parametre, opplistet med komma. Hvis det er to parametere - den første parameteren setter skjevheten horisontalt, og den andre - vertikalt. Hvis det er én parameter - så setter den skjevheten horisontalt (og ikke i begge retninger). Parameterne kan være både positive og negative.

Syntaks

cssvelger {
  transform: skew(én eller to vinkler);
}

Eksempel

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

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

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

Результат:

Eksempel

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

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

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

Результат:

Eksempel

I dette eksemplet er boksen skjevstilt med 30 grader vertikalt (positiv verdi):

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

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

Результат:

Eksempel

I dette eksemplet er boksen skjevstilt med 30 grader vertikalt (negativ verdi):

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

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

Результат:

Eksempel

Setter skjevhet samtidig langs X- og Y-aksen:

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

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

Результат:

Se også