Fungsi skew
Fungsi skew mengatur kemiringan elemen,
sehingga mengubahnya dari persegi panjang
menjadi jajar genjang. Digunakan bersama
dengan properti transform.
Nilai properti adalah sudut dalam satuan
untuk sudut apa pun. Kemiringan dilakukan di sekitar
titik yang ditentukan oleh properti transform-origin.
Dapat menerima satu atau dua parameter, yang dipisahkan dengan koma. Jika ada dua parameter - parameter pertama menentukan kemiringan secara horizontal, dan parameter kedua - secara vertikal. Jika hanya satu parameter - maka itu menentukan kemiringan secara horizontal (bukan di kedua sisi). Parameter dapat bernilai positif maupun negatif.
Sintaksis
selektor {
transform: skew(satu atau dua sudut);
}
Contoh
Dalam contoh ini, blok dimiringkan sebesar 30
derajat ke kiri:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Contoh
Dalam contoh ini, blok dimiringkan sebesar 30
derajat ke kanan:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(-30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Contoh
Dalam contoh ini, blok dimiringkan sebesar 30
derajat secara vertikal (nilai positif):
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(0deg, 30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Contoh
Dalam contoh ini, blok dimiringkan sebesar 30
derajat secara vertikal (nilai negatif):
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(0deg, -30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Contoh
Atur kemiringan secara bersamaan pada sumbu X dan Y:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(30deg, 30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
