Skew funksiýasy

skew funksiýasy elementyň eğriliğini kesgitleýär, şonuň bilen ony göniburçlykdan parallelogramma öwürýär. transform hasiýeti bilen bilelikde ulanylýar. Hasiýetiň gymmaty hökmünde burç üçin islendik birlikler kabul edilýär. Eğrilik transform-origin hasiýeti bilen kesgitlenýän nokat daşyndan amala aşyrylýar.

Bir ýa-da iki parametri kabul edip biler, olar vergul bilen bölünýär. Eger parametrler iki sany bolsa - birinji parametr göni çyzygyň boýunça eğriliği, ikinji bolsa, dikey çyzygyň boýunça eğriliği kesgitleýär. Eger parametr bir sany bolsa - onda ol göni çyzygyň boýunça eğriliği kesgitleýär (iki tarapyň boýunça däl). Parametrler hem öňüni kesijilikli, hem-de ters kesijilikli bolup biler.

Sintaksis

cssselektory {
  transform: skew(bir ýa-da iki burç);
}

Mysal

Bu mysalda blok 30 gradus çepe eğrilen:

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

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

Результат:

Mysal

Bu mysalda blok 30 gradus saga eğrilen:

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

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

Результат:

Mysal

Bu mysalda blok 30 gradus dikey çyzygyň boýunça eğrilen (öňüni kesijilikli baha):

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

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

Результат:

Mysal

Bu mysalda blok 30 gradus dikey çyzygyň boýunça eğrilen (ters kesijilikli baha):

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

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

Результат:

Mysal

X we Y oklary boýunça eğriliği bir wagtda kesgitleýäris:

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

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

Результат:

Şeýle-de serediň