Translate
translate() ile öğeleri kaydırmayı öğrenirsin.
translate() fonksiyonu
translate() bir öğeyi X ve Y eksenlerinde kaydırır. İki değer alır: translate(20px, 30px) sağa 20, aşağı 30 piksel götürür.
Tek değer yazarsan Y sıfır sayılır: translate(20px) yalnızca sağa kaydırır. Bu, bir bildirimi yalın tutmak için elverişlidir; yatay kaydırma sık karşılaşılan bir durumdur.
translateX ve translateY
Yalnızca bir ekseni değiştirmek istersen translateX() ya da translateY() kullan. translateX(-10px) sola 10 piksel kaydırır; translateY(15px) aşağı 15 piksel götürür.
Bu işlevler okunabilirliği artırır: bir bakışta hangi ekseni değiştirdiğini görebilirsin. İki eksenli translate() yerine tek ekseni seçmek çoğu zaman daha temiz bir yazım verir.
Yüzde değerle translate
Piksel yerine yüzde de yazabilirsin. Yüzde değeri öğenin kendi boyutuna göre hesaplanır, kapsayıcıya göre değil. translateX(50%) öğeyi kendi genişliğinin yarısı kadar sağa taşır.
Bu özellik bir öğeyi tam ortalamak için kullanışlıdır: translate(-50%, -50%) ile mutlak konumlu bir öğenin tam ortasını bir noktaya getirebilirsin.
Uygulama Hover efektli kaydırma
İki stil bloğu ekle. Birincisi .card seçicisi: transform: translateX(0). İkincisi .card:hover seçicisi: transform: translateX(12px). Kart hover'da sağa kaymalı.
Örnek çözümü göster
/* kart için dönüşüm ekle */
.card {
transform: translateX(0);
}
.card:hover {
transform: translateX(12px);
}Kendini test et
-
translate(20px, 30px) ne yapar?
.ok { transform: translate(20px, 30px); }- Sağa 20 piksel, aşağı 30 piksel kaydırır
- Yukarı 20 piksel, sola 30 piksel kaydırır
- Öğeyi 20 piksel büyütür, 30 piksel küçültür
- Öğeyi 20 derece sağa, 30 derece aşağı döndürür
Cevabı göster
Sağa 20 piksel, aşağı 30 piksel kaydırır — Doğru. İlk değer X (sağa 20 piksel), ikinci değer Y (aşağı 30 piksel) eksenidir.
-
translateX işlevini yaz
.ok { transform: ____(15px); }Cevabı göster
.ok { transform: translateX(15px); } -
İşlevi hareketine eşle
- translateX(10px)
- Sağa 10 piksel
- translateY(-5px)
- Yukarı 5 piksel
- translate(0, 20px)
- Aşağı 20 piksel
- translate(-10px, 0)
- Sola 10 piksel