skew ֆունկցիա

skew ֆունկցիան թեքում է տարրը՝ այն ուղղանկյունից վերածելով զուգահեռագծի: Օգտագործվում է transform հատկության հետ միասին: Հատկության արժեքը ցանկացած անկյունային միավորով անկյուն է: Թեքումը կատարվում է transform-origin հատկությամբ սահմանված կետի շուրջ:

Կարող է ընդունել մեկ կամ երկու պարամետր, որոնք թվարկվում են ստորակետով առանձնացված: Եթե պարամետրերը երկուսն են՝ առաջինը սահմանում է հորիզոնական թեքում, իսկ երկրորդը ՝ ուղղահայաց: Եթե պարամետրը մեկ է, ապա այն սահմանում է հորիզոնական թեքում (և ոչ թե երկու ուղղություններով): Պարամետրերը կարող են լինել և՛ դրական, և՛ բացասական:

Շարահյուսություն

cssընտրիչ {
  transform: skew(մեկ կամ երկու անկյուն);
}

Օրինակ

Այս օրինակում բլոկը թեքված է 30 աստիճանով դեպի ձախ:

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

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

Результат:

Օրինակ

Այս օրինակում բլոկը թեքված է 30 աստիճանով դեպի աջ:

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

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

Результат:

Օրինակ

Այս օրինակում բլոկը թեքված է 30 աստիճանով ուղղահայաց (դրական արժեք):

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

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

Результат:

Օրինակ

Այս օրինակում բլոկը թեքված է 30 աստիճանով ուղղահայաց (բացասական արժեք):

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

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

Результат:

Օրինակ

Միաժամանակ թեքում ենք սահմանում X և Y առանցքների վրա:

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

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

Результат:

Տես նաև