Scale
scale() ile öğeleri ölçeklendirmeyi öğrenirsin.
scale() fonksiyonu
scale() bir öğeyi büyütür ya da küçültür. scale(2) öğeyi iki katına çıkarır; scale(0.5) yarıya indirir. Değer 1 olduğunda öğe değişmez.
Ölçekleme merkezi varsayılan olarak öğenin ortasıdır. Bu yüzden öğe her iki yöne doğru simetrik olarak büyür. Komşu öğelerin boyutu ise aynı kalır.
scaleX ve scaleY
Tek ekseni ölçeklemek için scaleX() ve scaleY() kullan. scaleX(2) öğeyi yatayda iki kat yapar; yükseklik aynı kalır.
İki değeri ayrı ayrı vermek istersen scale(2, 0.5) yazabilirsin: yatayda iki kat, dikeyde yarım. Bu yazım tek bildirimde iki eksene birden değişiklik yapmanın kısa yoludur.
Negatif scale ile çevirme
Negatif bir ölçek öğeyi çevirir. scaleX(-1) öğeyi yatayda ayna gibi ters yüz eder; içeriği sağdan sola yatırır.
Bu teknik bir simge ya da ok için pratiktir. Hover'da ters dönen bir öğe, etkileşimi anında belli eder. Aynı yöntem bir kartı dikeyde de çevirir.
Uygulama Buton hover scale
İki stil bloğu ekle. Birincisi .button seçicisi: transform: scale(1). İkincisi .button:hover seçicisi: transform: scale(1.1). Buton hover'da yüzde on büyümeli.
Örnek çözümü göster
/* buton için dönüşüm ekle */
.button {
transform: scale(1);
}
.button:hover {
transform: scale(1.1);
}Kendini test et
-
scale(1.5) ne yapar?
.buyut { transform: scale(1.5); }- Öğeyi 1.5 piksel sağa kaydırır
- Öğeyi %50 küçültür
- Öğeyi 1.5 derece döndürür
- Öğeyi 1.5 katına çıkarır
Cevabı göster
Öğeyi 1.5 katına çıkarır — Doğru. scale bir orandır; 1.5 öğeyi yüzde elli büyütür, yani 1.5 katına çıkarır.
-
scale işlevini yaz
.buyut { transform: ____(1.5); }Cevabı göster
.buyut { transform: scale(1.5); } -
İşlevi etkisine eşle
- scale(2)
- İki kat büyüt
- scale(0.5)
- Yarıya indir
- scaleX(-1)
- Yatayda ters çevir
- scaleY(2)
- Dikeyde iki kat