skew Fonksiyonu

skew fonksiyonu, bir öğeyi eğerek dikdörtgenden bir paralelkenara dönüştürür. transform özelliği ile birlikte kullanılır. Değeri, açılar için herhangi bir birimde bir açıdır. Eğme işlemi, transform-origin özelliği ile belirlenen nokta etrafında gerçekleşir.

Virgülle ayrılmış bir veya iki parametre alabilir. İki parametre varsa - ilk parametre yatay eğmeyi, ikincisi ise dikey eğmeyi belirler. Eğer tek parametre varsa - bu, yatay eğmeyi belirler (her iki yönü değil). Parametreler pozitif veya negatif olabilir.

Sözdizimi

cssseçici {
  transform: skew(bir veya iki açı);
}

Örnek

Bu örnekte, blok sola doğru 30 derece eğilmiştir:

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

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

Результат:

Örnek

Bu örnekte, blok sağa doğru 30 derece eğilmiştir:

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

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

Результат:

Örnek

Bu örnekte, blok dikeyde 30 derece eğilmiştir (pozitif değer):

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

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

Результат:

Örnek

Bu örnekte, blok dikeyde 30 derece eğilmiştir (negatif değer):

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

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

Результат:

Örnek

Aynı anda hem X hem de Y ekseninde eğme uyguluyoruz:

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

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

Результат:

Ayrıca Bakınız