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

Sıradaki ders: Özet - Etkileşimli kart

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler