Funksiya skew

Funksiya skew elementi əyir, beləliklə onu düzbucaqlıdan paraleloqrama çevirir. transform xüsusiyyəti ilə birlikdə istifadə olunur. Xüsusiyyətin dəyəri kimi istənilən bucaq ölçü vahidləri istifadə oluna bilər. Əyilmə, transform-origin xüsusiyyəti ilə təyin olunan nöqtə ətrafında həyata keçirilir.

Bir və ya iki parametr qəbul edə bilər, parametrlər vergüllə ayrılır. Əgər iki parametr varsa - birinci parametr üfüqi, ikinci parametr isə şaquli əyilməni təyin edir. Əgər parametr bir dənədirsə, o zaman üfüqi əyilməni təyin edir (hər iki istiqamətdə yox). Parametrlər həm müsbət, həm də mənfi ola bilər.

Sintaksis

cssselektor {
  transform: skew(bir ya iki bucaq);
}

Nümunə

Bu nümunədə blok sola doğru 30 dərəcə əyilib:

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

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

Результат:

Nümunə

Bu nümunədə blok sağa doğru 30 dərəcə əyilib:

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

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

Результат:

Nümunə

Bu nümunədə blok şaquli olaraq (müsbət dəyər) 30 dərəcə əyilib:

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

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

Результат:

Nümunə

Bu nümunədə blok şaquli olaraq (mənfi dəyər) 30 dərəcə əyilib:

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

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

Результат:

Nümunə

Eyni zamanda həm X, həm də Y oxu üzrə əyilmə təyin edirik:

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

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

Результат:

Həmçinin bax