De skew-functie

De functie skew bepaalt de scheefheid van een element, waardoor het van een rechthoek in een parallellogram verandert. Wordt gebruikt in combinatie met de eigenschap transform. De waarde van de eigenschap is een hoek in elke hoekeenheid. De scheefheid wordt uitgevoerd rondom het punt dat wordt bepaald door de eigenschap transform-origin.

Kan één of twee parameters accepteren, gescheiden door een komma. Als er twee parameters zijn - bepaalt de eerste parameter de scheefheid horizontaal, en de tweede - verticaal. Als er één parameter is - dan bepaalt deze de scheefheid horizontaal (en niet aan beide kanten). Parameters kunnen zowel positief als negatief zijn.

Syntaxis

cssselector {
  transform: skew(één of twee hoeken);
}

Voorbeeld

In dit voorbeeld is het blok 30 graden naar links gekanteld:

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

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

Результат:

Voorbeeld

In dit voorbeeld is het blok 30 graden naar rechts gekanteld:

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

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

Результат:

Voorbeeld

In dit voorbeeld is het blok 30 graden verticaal gekanteld (positieve waarde):

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

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

Результат:

Voorbeeld

In dit voorbeeld is het blok 30 graden verticaal gekanteld (negatieve waarde):

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

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

Результат:

Voorbeeld

Bepaal de scheefheid simultaan langs de X- en Y-as:

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

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

Результат:

Zie ook