Skew
skew() ile öğeleri eğmeyi öğrenirsin.
skew() fonksiyonu
skew() bir öğeyi eğer; köşeleri yatay ya da dikey eksende kaydırarak paralelkenar görünümü verir. skew(20deg) yatayda 20 derece eğer.
İki değer verirsen birinci X, ikinci Y ekseni için uygulanır: skew(10deg, 5deg). Bu yazım tek bildirimde iki ekseni birden eğmenin kısa yoludur.
skewX ve skewY
Tek ekseni eğmek için skewX() ve skewY() kullan. skewX(15deg) yatay kenarı yatar; skewY(15deg) dikey kenarı yatar.
Bu işlevler bir başlık ya da etikete dinamik bir his katar. Tek eksen seçimi, sonucu öngörülebilir kılar; iki ekseni birden eğmekten çok daha denetimli bir sonuç verir.
skew ile paralelkenar
Bir rozet ya da kurdele tasarımında skewX(-10deg) eğik bir şerit verir. İçindeki metni dik tutmak için çocuk öğeye skewX(10deg) uygula.
Bu 'eğ ve geri eğ' tekniği, görsel olarak yatık bir çerçeve içinde düz metin göstermenin standart yoludur. Şerit görünümü bozulmadan metin okunabilir kalır.
Uygulama Skew ile rozet
Bir .badge seçicisi yaz ve içine transform: skewX(-10deg) bildirimini ekle. Rozet yatayda sola doğru eğilmeli.
Örnek çözümü göster
/* rozet için eğim ekle */
.badge {
transform: skewX(-10deg);
}Kendini test et
-
skew(15deg) ne yapar?
.serit { transform: skew(15deg); }- Öğeyi yatayda 15 derece eğer
- Öğeyi 15 piksel sağa taşır
- Öğeyi 15 kat büyütür
- Öğeyi 15 derece döndürür
Cevabı göster
Öğeyi yatayda 15 derece eğer — Doğru. skew(15deg) yatay eksende 15 derece eğer; paralelkenar görünümü verir.
-
skewX işlevini yaz
.serit { transform: ____(15deg); }Cevabı göster
.serit { transform: skewX(15deg); } -
İşlevi eksenine eşle
- skewX
- Yatay eksen
- skewY
- Dikey eksen
- skew
- İki eksen birden
- rotate
- Döndürür, eğmez