CSS translateY() fonksiyonu, bir HTML öğesini dikey eksende (Y ekseni) belirtilen miktarda kaydırmak için kullanılır. Bu işlem, öğeyi sayfa akışını bozmadan yukarı veya aşağı taşır. Pozitif bir değer (örneğin 20px) öğeyi aşağı kaydırırken, negatif bir değer (-20px) yukarı kaydırır. Yüzde değerleri ise öğenin kendi yüksekliğine göre hesaplanır; translateY(50%) öğeyi kendi yüksekliğinin yarısı kadar aşağı hareket ettirir. Bu fonksiyon, CSS transform özelliği içinde kullanılır ve CSS Transforms Modülü Seviye 1 taslağında tanımlanmıştır.
translateY() fonksiyonunun en büyük avantajlarından biri, belge akışını etkilememesidir. Yani öğeyi taşımak, çevresindeki diğer öğelerin konumunu değiştirmez; sadece görsel olarak yeni bir konuma kaydırır. Bu özellik, özellikle animasyonlar için idealdir. Örneğin, bir kart bileşenini başlangıçta 50 piksel aşağıda ve opaklığı 0 olarak gizleyip, kullanıcı etkileşimiyle yukarı kaydırarak görünür hale getirebilirsiniz. Bu tür kullanımlar, sayfa yüklendiğinde öğelerin yukarı doğru kayarak görünmesi gibi pop-up veya fade-in animasyonlarında sıkça tercih edilir.
Form alanlarında da translateY() etkili bir şekilde kullanılabilir. Örneğin, MUI gibi kütüphanelerdeki TextField bileşeninde, etiket başlangıçta placeholder gibi görünürken, kullanıcı alana odaklandığında yukarı kayarak gerçek etiket konumuna geçer. Bu, label öğesine translateY(-32px) uygulanarak ve ölçek küçültülerek elde edilir. Ayrıca, hover durumunda öğeyi hafifçe yukarı kaydırmak gibi mikro animasyonlar da ekleyebilirsiniz. Ancak dikkat edilmesi gereken bir nokta, doğrudan :hover gibi sözde sınıflara translateY() uygulandığında, öğe fare imlecinden uzaklaşırsa hover durumu kaybolabilir ve bu da titremeye yol açabilir. Bu sorunu çözmek için, dönüşüm uygulanacak öğeyi bir üst kapsayıcıya yerleştirip hover'ı kapsayıcıya atamak en iyi yöntemdir.
CSS translateY() fonksiyonu, modern tarayıcıların tümü tarafından desteklenmektedir ve temel bir CSS özelliği haline gelmiştir. Diğer dönüşüm fonksiyonları gibi, karmaşık animasyonlar ve düzenler için güçlü bir araçtır. Özellikle sayfa akışını bozmadan öğeleri taşıma ihtiyacı duyduğunuz her durumda translateY() kullanmayı düşünebilirsiniz. Detaylı bilgi ve örnekler için CSS Transforms Modülü Seviye 1 taslağını inceleyebilirsiniz.
