Funkcja skewY

Funkcja skewY definiuje skoszenie elementu wzdłuż osi Y, przekształcając go w równoległobok. Używana jest razem z właściwością transform. Wartością właściwości jest kąt w dowolnych jednostkach kątów. Kąt może być zarówno dodatni, jak i ujemny. Wartość dodatnia skosza element w górę, ujemna - w dół. Skoszenie jest wykonywane wokół punktu zdefiniowanego przez właściwość transform-origin.

Składnia

cssselektor {
  transform: skewY(kąt);
}

Przykład

W tym przykładzie blok jest skoszony o 30 stopni w górę:

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

Результат:

Przykład

W tym przykładzie blok jest skoszony o 30 stopni w dół:

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

Результат:

Zobacz też

  • funkcję skew,
    która definiuje skoszenie wzdłuż osi X i Y
  • funkcję skewX,
    która definiuje skoszenie wzdłuż osi X