Funktionen skewY

Funktionen skewY sätter skevningen av ett element längs Y-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 skevar elementet uppåt, ett negativt - nedåt. Skevningen sker kring punkten som anges av egenskapen transform-origin.

Syntax

cssselector {
  transform: skewY(vinkel);
}

Exempel

I detta exempel är blocket skevat 30 grader uppåt:

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

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

Результат:

Exempel

I detta exempel är blocket skevat 30 grader nedåt:

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

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

Результат:

Se även