Funktionen skew

Funktionen skew applicerar en skevning på ett element, vilket förvandlar det från en rektangel till ett parallellogram. Används tillsammans med egenskapen transform. Värdet på egenskapen är en vinkel i någon av vinkelenheterna. Skevningen sker runt punkten som anges av egenskapen transform-origin.

Kan ta en eller två parametrar, uppräknade separerade med kommatecken. Om det finns två parametrar - den första parametern anger skevning horisontellt, och den andra - vertikalt. Om det bara finns en parameter - så anger den skevning horisontellt (och inte i båda riktningarna). Parametrarna kan vara både positiva och negativa.

Syntax

cssselector {
  transform: skew(ett eller två vinklar);
}

Exempel

I detta exempel är blocket skevt 30 grader åt vänster:

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

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

Результат:

Exempel

I detta exempel är blocket skevt 30 grader åt höger:

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

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

Результат:

Exempel

I detta exempel är blocket skevt 30 grader vertikalt (positivt värde):

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

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

Результат:

Exempel

I detta exempel är blocket skevt 30 grader vertikalt (negativt värde):

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

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

Результат:

Exempel

Applicerar skevning samtidigt längs X- och Y-axeln:

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

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

Результат:

Se även