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

Sıradaki ders: Skew

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler