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;
}

Результат:

Сондай-ақ қараңыз