skew ֆունկցիա
skew ֆունկցիան թեքում է տարրը՝
այն ուղղանկյունից վերածելով
զուգահեռագծի: Օգտագործվում է
transform
հատկության հետ միասին:
Հատկության արժեքը ցանկացած անկյունային միավորով
անկյուն է: Թեքումը կատարվում է
transform-origin
հատկությամբ սահմանված կետի շուրջ:
Կարող է ընդունել մեկ կամ երկու պարամետր, որոնք թվարկվում են ստորակետով առանձնացված: Եթե պարամետրերը երկուսն են՝ առաջինը սահմանում է հորիզոնական թեքում, իսկ երկրորդը ՝ ուղղահայաց: Եթե պարամետրը մեկ է, ապա այն սահմանում է հորիզոնական թեքում (և ոչ թե երկու ուղղություններով): Պարամետրերը կարող են լինել և՛ դրական, և՛ բացասական:
Շարահյուսություն
ընտրիչ {
transform: skew(մեկ կամ երկու անկյուն);
}
Օրինակ
Այս օրինակում բլոկը թեքված է 30
աստիճանով դեպի ձախ:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Օրինակ
Այս օրինակում բլոկը թեքված է 30
աստիճանով դեպի աջ:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(-30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Օրինակ
Այս օրինակում բլոկը թեքված է 30
աստիճանով ուղղահայաց (դրական արժեք):
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(0deg, 30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Օրինակ
Այս օրինակում բլոկը թեքված է 30
աստիճանով ուղղահայաց (բացասական արժեք):
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(0deg, -30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Օրինակ
Միաժամանակ թեքում ենք սահմանում X և Y առանցքների վրա:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(30deg, 30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
