Yükleniyor...

CSS Dönüşümler

Geçişler değişimin ne kadar süreceğini söyler. Transform piksellerin nereye gideceğini söyler: chip kaydırma, yükleyici ikonunu döndürme, hover’da badge büyütme — çoğu zaman margin/top gibi komşuları itmeden.

transform neyi değiştirir?

transform, çizilen kutuya 2D (sonra 3D) bir eşleme uygular. Akıştaki yer genelde aynı kalır. translate() mikro hareketler için: hover, aç/kapa, küçük düzeltmeler.

Tek özellik, birden çok fonksiyon — tek transform değerinde virgülle liste yok; boşlukla zincirleyin: transform: translateX(1rem) rotate(8deg) scale(1.05);

Temel 2D fonksiyonlar

📊 2D transform fonksiyonları — özet

Fonksiyon Tipik iş
translate(x, y) / translateX / translateY Reflow drama olmadan görsel kaydırma
rotate(açı) İkon ve ok döndürme (deg, turn)
scale(x, y) / scale(n) Hover vurgusu — ölçülü değerler
skew(x, y) Nadir eğim — küçük açılar

Açılar deg veya turn. translate() yüzdeleri öğenin kendi boyutuna göredir.

Önce translate

Görsel bir itme için top/margin’den önce translate. Önceki dersteki transition ile hareket daha akıcı olur.

Chip nudge on hover

css 
.chip {
display: inline-block;
padding: 0.35rem 0.75rem;
border-radius: 999px;
background: #e0e7ff;
color: #1e3a8a;
transition: transform 0.2s ease, background-color 0.2s ease;
}

.chip:hover,
.chip:focus-visible {
transform: translateY(-0.15rem);
background: #c7d2fe;
}

Chip görsel olarak yükselir; satır kutusu yerinde kalır. Negatif margin-top ile komşular zıplar — karşılaştırın.

rotate ve scale birlikte

Rozet ve ikonlarda küçük scale + rotate sık görülür. Dar açılar profesyonel kalır.

Badge pop and chevron spin

css 
.badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.875rem;
transition: transform 0.25s ease;
}

.badge:hover {
transform: scale(1.06);
}

.chevron {
display: inline-block;
transition: transform 0.2s ease;
}

.menu-open .chevron {
transform: rotate(180deg);
}

scale(1.06) vurgu; scale(2) hata. rotate(180deg) «açık» — sınıf ile.

transform-origin — menteşe

Varsayılan pivot merkez. transform-origin taşır — kapı gibi sol-alt, sekmeler için 50% 100%.

Hinge from bottom edge with transition

css 
.panel-tilt {
transform-origin: 50% 100%;
transition: transform 0.35s ease;
}

.panel-tilt.is-open {
transform: rotateX(12deg);
}

Hafif rotateX kelime dağarcığı için. Tam 3D isteğe bağlı 3D Transforms’ta — burada origin önemli.

transition ile; layout’tan kaçının

transition taban kuralda; transform (ve opacity) animate edin. prefers-reduced-motion: reduce’a saygı.

Deneyin

  1. translateY(-0.2rem) vs margin-top.
  2. .is-open ile chevron 180deg.
  3. transform-origin: left center + küçük rotate.
  4. Tek transform’ta translateX(0.5rem) scale(1.04).
  5. Reduced motion emülasyonu.

Sık hatalar

  • Lift için translate yerine top/margin
  • Büyük sarmalayıcıda rotate(45deg)
  • transform-origin unutmak
  • Erişilebilirlik plansız scale(0)
  • Gereksiz ağır 3D

Özet

  • transform çizilen kutuyu hareket ettirir; akış genelde aynı
  • Fonksiyonları tek transform’ta zincirleyin
  • transform-origin = pivot
  • transition ile eşleştirin
  • Sırada: CSS Animations (@keyframes)

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör

❓
6
Sorular
🎯
70%
Geçmek İçin
♾️
∞
Süre
🔄
∞
Deneme

📝 Talimatlar

  • Her soruyu dikkatle okuyun
  • Her soru için en iyi cevabı seçin
  • Quiz'i istediğiniz kadar tekrar alabilirsiniz
  • İlerlemeniz üstte gösterilecek
Konu 60 / 63
Css Ders