CSS translateY() fonksiyonu, bir HTML öğesini dikey eksende belirtilen miktarda kaydırmak için kullanılır. Pozitif değerler öğeyi aşağı, negatif değerler ise yukarı taşır. Bu fonksiyon, transform özelliği içinde diğer dönüşüm fonksiyonlarıyla birlikte kullanılır. translateY(), CSS Transforms Module Level 1 taslağında tanımlanmıştır. Sözdizimi oldukça basittir: translateY(
translateY() fonksiyonu, belge akışını etkilemediği için basit animasyonlar için idealdir. Örneğin, bir kart bileşenini kullanıcı etkileşimiyle yukarı kaydırarak görünür hale getirebilirsiniz. Başlangıçta öğeyi translateY(50px) ile 50 piksel aşağı kaydırıp opacity: 0 yaparak gizleyin, ardından bir tetikleyiciyle (örneğin butona tıklama) translateY(0) ve opacity: 1 yaparak yumuşak bir geçiş elde edin. Hover efektiyle de öğeyi hafifçe yukarı kaydırabilirsiniz. Bu sayede sayfa akışı bozulmadan görsel efektler oluşturulur.
Form alanlarında da translateY() kullanarak modern animasyonlar yapabilirsiniz. Örneğin, bir input alanına odaklanıldığında label'ı yukarı kaydırmak için translateY(-32px) ve scale(0.8) kullanabilirsiniz. Bu, MUI gibi kütüphanelerdeki TextField bileşenine benzer bir etki yaratır. translateY() fonksiyonu, diğer transform fonksiyonları gibi belge akışını etkilemez; yani öğe görsel olarak kaydırılsa da orijinal yeri boş kalır ve çevresindeki öğeler etkilenmez. Bu özellik, margin gibi özelliklerin aksine yeniden akışa neden olmadığı için performans açısından avantajlıdır.
Sonuç ve Değerlendirme
translateY() kullanırken dikkat edilmesi gereken bir nokta, işaretçi sözde sınıflarıyla (örneğin :hover) etkileşim sorunlarıdır. Öğe uzak bir mesafeye kaydırıldığında, fare imleci öğeden uzaklaşacağı için :hover durumu kaybolur ve öğe anında eski konumuna döner. Bu, sürekli bir titreme döngüsüne yol açabilir. Çözüm olarak, kaydırılacak öğeyi bir üst kapsayıcı içine alın ve sözde sınıfı kapsayıcıya uygulayın. Örneğin, .parent:hover .child { transform: translateY(160px); } şeklinde kullanmak sorunu çözer. translateY() fonksiyonu, tüm modern tarayıcılar tarafından desteklenmektedir.
