skewX Fonksiyonu

skewX fonksiyonu, bir elemanı X ekseninde çarpıtarak onu bir paralelkenara dönüştürür. transform özelliği ile birlikte kullanılır. Değeri, herhangi bir açı biriminde bir açıdır. Açı pozitif veya negatif olabilir. Pozitif bir değer sola doğru çarpıtma yapar, negatif bir değer ise sağa doğru yapar. Çarpıtma, transform-origin özelliği ile belirlenen nokta etrafında uygulanır.

Sözdizimi

cssseçici {
  transform: skewX(açı);
}

Örnek

Bu örnekte, blok sola doğru 30 derece çarpıtılmıştır:

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

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

Результат:

Örnek

Bu örnekte, blok sağa doğru 30 derece çarpıtılmıştır:

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

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

Результат:

Ayrıca Bakınız