Ö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); }