Fungsi skew

Fungsi skew menetapkan condongan elemen, dengan itu mengubahnya daripada segi empat tepat kepada segi empat selari. Digunakan bersama-sama dengan sifat transform. Nilai bagi sifat ialah sudut dalam mana-mana unit untuk sudut. Condongan dilakukan di sekitar titik, yang ditetapkan oleh sifat transform-origin.

Boleh menerima satu atau dua parameter, disenaraikan secara berturutan. Jika terdapat dua parameter - parameter pertama menetapkan condongan mengufuk, dan parameter kedua - menegak. Jika hanya satu parameter - ia menetapkan condongan mengufuk (bukan pada kedua-dua arah). Parameter boleh menjadi positif atau negatif.

Sintaks

cssselector {
  transform: skew(satu atau dua sudut);
}

Contoh

Dalam contoh ini, blok dicondongkan 30 darjah ke kiri:

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

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

Результат:

Contoh

Dalam contoh ini, blok dicondongkan 30 darjah ke kanan:

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

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

Результат:

Contoh

Dalam contoh ini, blok dicondongkan 30 darjah menegak (nilai positif):

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

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

Результат:

Contoh

Dalam contoh ini, blok dicondongkan 30 darjah menegak (nilai negatif):

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

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

Результат:

Contoh

Menetapkan condongan serentak pada paksi X dan Y:

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

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

Результат:

Lihat juga