Özet - Etkileşimli kart

Transform ile hover efektli etkileşimli kart kurarsın.

Tüm dönüşümleri birleştir

transform özelliği tek bir bildirimde birden çok işlevi yan yana yazmana izin verir. transform: translate(10px, 0) rotate(-5deg) scale(1.05) bir öğeyi hem kaydırır, hem döndürür, hem de büyütür.

Sıra önemlidir: işlevler soldan sağa uygulanır. Hover kartlarında bu birleşim, etkileşimi zengin gösterir.

transition ile yumuşatma

transform anında uygulanır; hover kartı sert bir sıçrama yapar. transition özelliği ile değişimi süre boyunca yayarsın. transition: transform 0.3s ease sıçramayı 300 milisaniyeye yayar.

Böylece kayma, dönme ve ölçekleme yumuşak bir geçitle görünür. Etkileşim daha doğal hissedilir; göz sert geçişlerle yorulmaz.

Uygulama Etkileşimli kart kur

İki stil bloğu ekle. Birincisi .card seçicisi; içine iki bildirim yaz: transition: transform 0.3s ease ve transform: scale(1). İkincisi .card:hover seçicisi; içine transform: scale(1.05) rotate(-2deg) yaz. Kart hover'da hafifçe büyüyüp dönmeli.

Örnek çözümü göster

/* kart için dönüşüm ve geçiş ekle */
.card {
  transition: transform 0.3s ease;
  transform: scale(1);
}
.card:hover {
  transform: scale(1.05) rotate(-2deg);
}

Kendini test et

Hangi işlev öğeyi döndürür?
```
/* birini seç */
```
- translate(10px)
- scale(2)
- rotate(45deg)
- skewX(10deg)
Cevabı göster

rotate(45deg) — Doğru. rotate açı birimiyle döndürür; 45 derece çevirir.

Hover efektini tamamla

.kart:hover {
  transform: ____(-5deg);
}

Cevabı göster

.kart:hover {
  transform: rotate(-5deg);
}

Sıradaki ders: CSS değişkenleri nedir?

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler