CSS translateY() fonksiyonu, bir HTML öğesini dikey olarak belirtilen miktarda kaydırır. Bu fonksiyon, transform özelliği içinde kullanılır ve öğeyi ya yukarı ya da aşağı hareket ettirir. Pozitif değerler (örneğin 50px) öğeyi aşağı kaydırırken, negatif değerler (örneğin -50px) 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ğı kaydırırken, translateY(-100%) tamamen yukarı kaydırır. Bu fonksiyon, CSS Transforms Modülü Seviye 1 taslağında tanımlanmıştır.
translateY() fonksiyonunun en büyük avantajlarından biri, belge akışını (document flow) bozmamasıdır. Yani, bir öğeyi kaydırdığınızda, diğer öğelerin konumu değişmez ve kaydırılan öğenin orijinal yeri boş kalmaz. Bu özellik, margin gibi diğer CSS özelliklerine göre daha performanslıdır çünkü yeniden düzenleme (reflow) tetiklemez. Örneğin, bir pop-up animasyonu yaparken, öğeyi başlangıçta translateY(50px) ile aşağı kaydırıp opacity: 0 yaparak gizleyebilir, ardından bir etkileşimle translateY(0) ve opacity: 1 yaparak yukarı doğru kayarak belirmesini sağlayabilirsiniz.
translateY() fonksiyonu, form alanları gibi etkileşimli öğelerde de sıkça kullanılır. Örneğin, bir metin giriş alanında etiket (label), başlangıçta placeholder gibi görünürken, kullanıcı alana odaklandığında yukarı kayarak etiket konumuna geçebilir. Bu tür animasyonlar, kullanıcı deneyimini zenginleştirir ve arayüzü daha canlı hale getirir. Ayrıca, hover efektiyle mikro animasyonlar eklemek de mümkündür. Örneğin, bir karta fare ile üzerine gelindiğinde translateY(-8px) uygulayarak hafifçe yukarı kalkmasını sağlayabilirsiniz.
Ancak translateY() kullanırken dikkat edilmesi gereken bir nokta, pointer pseudo-class'ları (örneğin :hover) ile ilgilidir. Eğer bir öğeye doğrudan :hover üzerinde translateY() uygularsanız, öğe fare imlecinin altından kaydığı için hover durumu kaybolur ve öğe eski konumuna döner. Bu da sürekli bir titreme (flicker) efekti yaratır. Bunun çözümü, kaydırılacak öğeyi bir üst kapsayıcıya (parent) yerleştirip :hover durumunu kapsayıcıya uygulamak ve translateY() fonksiyonunu iç öğeye vermektir. Bu sayede hover durumu sabit kalır ve animasyon sorunsuz çalışır.
