CSS translateY() fonksiyonu, bir HTML elementini dikey eksende belirtilen miktar kadar kaydırmak için kullanılır. Bu fonksiyon, pozitif değerlerde elementi aşağı, negatif değerlerde ise yukarı taşır. translateY(), diğer transform fonksiyonları gibi transform özelliği içinde kullanılır ve CSS Transforms Module Level 1 taslağında tanımlanmıştır. Örneğin, .parent:hover .box { transform: translateY(50%); } kodu, .box elementini kendi yüksekliğinin yarısı kadar aşağı kaydırır.
translateY() fonksiyonunun sözdizimi oldukça basittir: translateY(). Burada tek bir argüman alır: kaydırma miktarını ve yönünü belirten bir uzunluk veya yüzde değeri. Uzunluk değerleri (px, em, ch gibi) mutlak veya göreceli birimlerle ifade edilebilir. Örneğin, translateY(80px) elementi 80 piksel aşağı, translateY(-24ch) ise 24 karakter genişliği kadar yukarı kaydırır. Yüzde değerleri ise elementin kendi yüksekliğine göre hesaplanır: translateY(50%) yarı yükseklik kadar aşağı, translateY(-100%) ise tam yükseklik kadar yukarı kaydırır.
translateY() fonksiyonunun en büyük avantajlarından biri, belge akışını bozmamasıdır. Diğer transform fonksiyonları gibi, translateY() de elementi görsel olarak kaydırırken, çevresindeki diğer elementlerin konumunu etkilemez. Elementin orijinal konumu boşluk olarak korunur, yani sayfa düzeni değişmez. Bu özellik, özellikle animasyonlarda ve geçiş efektlerinde büyük bir avantaj sağlar çünkü yeniden düzenleme (reflow) tetiklemez ve performansı artırır. Örneğin, margin kullanarak kaydırma yapmak komşu elementleri de etkilerken, translateY() sadece görsel konumu değiştirir.
translateY() fonksiyonu, basit animasyonlar için idealdir. Özellikle 'pop-up' veya 'fade-in' efektlerinde, elementlerin aşağıdan yukarı kayarak görünmesini sağlamak için kullanılır. Örneğin, bir kart bileşenini (stat-card) düşünelim: Başlangıçta opacity: 0 ve transform: translateY(50px) ile 50 piksel aşağıda ve görünmez halde olan kart, bir butona tıklandığında veya sayfa kaydırıldığında .dashboard.active sınıfı eklendiğinde opacity: 1 ve transform: translateY(0) ile normal konumuna gelir. Ayrıca, hover durumunda translateY(-8px) ile hafifçe yukarı kaydırarak mikro animasyon eklenebilir.
Sistem Güvenliği
Form alanlarında da translateY() fonksiyonu yaratıcı şekilde kullanılabilir. MUI gibi UI kütüphanelerindeki TextField bileşeninde olduğu gibi, etiket (label) başlangıçta placeholder gibi input içinde görünürken, kullanıcı input'a odaklandığında etiket yukarı kayarak üstte kalıcı bir etiket haline gelir. Bu animasyon, label elementine translateY(-32px) scale(0.8) uygulanarak gerçekleştirilir. Etiketin konumu, input'tan odak kalktığında eski haline döner. Bu tür animasyonlar, kullanıcı deneyimini zenginleştirir.
Uzmanların Görüşleri
translateY() kullanırken dikkat edilmesi gereken bir nokta, pointer olaylarıyla (hover, click) ilgili sorunlardır. Eğer translateY() doğrudan :hover gibi bir sözde sınıfa uygulanırsa, element kaydığında fare imleci elementin üzerinden ayrılabilir ve hover durumu kaybolur. Bu da elementin eski konumuna dönmesine ve sürekli bir titreme döngüsüne yol açar. Çözüm, kaydırılacak elementi bir üst kapsayıcı içine almak ve hover'ı kapsayıcıya uygulamaktır. Örneğin, .parent:hover .good { transform: translateY(160px); } şeklinde kullanmak sorunu çözer.
translateY() fonksiyonu, modern tarayıcıların tümü tarafından desteklenmektedir (baseline support). CSS Transforms Module Level 1 spesifikasyonunda tanımlanan bu fonksiyon, Editor's Draft aşamasında olmasına rağmen yıllardır kararlı bir şekilde kullanılmaktadır. translateY() ile birlikte translateX() ve translate() fonksiyonları da benzer şekilde çalışır. Bu fonksiyonlar, özellikle duyarlı (responsive) tasarımlarda ve performans odaklı animasyonlarda vazgeçilmez araçlardır.
Gelecekte Ne Bekleniyor?
Sonuç olarak, CSS translateY() fonksiyonu, elementleri dikeyde kaydırmak için basit, etkili ve performanslı bir yöntemdir. Belge akışını bozmaması, yüzdelik değerlerle esnek kullanımı ve geniş tarayıcı desteği sayesinde hem basit kaydırmalar hem de karmaşık animasyonlar için idealdir. Form animasyonlarından kart geçişlerine kadar pek çok alanda kullanılabilir. Pointer olaylarıyla ilgili olası sorunlara karşı dikkatli olmak ve uygun kapsayıcı yapısını kullanmak, başarılı bir uygulama için yeterlidir.
Kaynak: css-tricks.com
