Funktionen skewX

Funktionen skewX skevnar ett element längs X-axeln, vilket förvandlar det till ett parallellogram. Används tillsammans med egenskapen transform. Värdet på egenskapen är en vinkel i någon av enheterna för vinklar. Vinkeln kan vara både positiv och negativ. Ett positivt värde skevnar åt vänster, ett negativt - åt höger. Skevningen sker runt punkten som anges av egenskapen transform-origin.

Syntax

cssselektor {
  transform: skewX(vinkel);
}

Exempel

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

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

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

Результат:

Exempel

I detta exempel skevnas blocket 30 grader åt höger:

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

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

Результат:

Se även