CSS translateY() fonksiyonu, bir HTML elementini dikey eksende belirtilen miktar kadar kaydırmak için kullanılır. Pozitif değerler elementi aşağı, negatif değerler ise yukarı taşır. Örneğin, translateY(50%) elementi kendi yüksekliğinin yarısı kadar aşağı kaydırırken, translateY(-100%) tamamen yukarı taşır. Bu fonksiyon, diğer dönüşüm fonksiyonlarıyla birlikte transform özelliği içinde kullanılır ve CSS Transforms Modülü Seviye 1 taslağında tanımlanmıştır.
translateY() fonksiyonu tek bir argüman alır: ya bir uzunluk değeri (px, em, ch gibi) ya da yüzde. Yüzde değerleri, elementin kendi yüksekliğine göre hesaplanır. Örneğin, 100px yüksekliğindeki bir elemente translateY(40%) uygulanırsa element 40px aşağı kayar. translateY(80px) ise elementi 80 piksel aşağı taşırken, translateY(-24ch) 24 karakter genişliği kadar yukarı kaydırır.
Bu fonksiyon, özellikle basit animasyonlar için idealdir çünkü belge akışını bozmaz. Örneğin, bir kart bileşenini sayfa yüklendiğinde aşağıdan yukarı kaydırmak için opacity: 0 ve transform: translateY(50px) ile başlayıp, aktif olduğunda opacity: 1 ve transform: translateY(0) yapabilirsiniz. Ayrıca hover durumunda negatif değerle hafif yukarı kaldırarak mikro animasyonlar ekleyebilirsiniz. Form alanlarında da etiketleri yukarı kaydırarak güzel geçişler elde edilebilir.
Sistem Güvenliği
translateY()'nin en önemli avantajı, diğer elementlerin yerini değiştirmemesidir. Element görsel olarak kayar ancak orijinal yeri boş kalır ve çevresindeki elementler etkilenmez. Bu, margin gibi özelliklerin aksine reflow'u tetiklemez. Ancak dikkat edilmesi gereken bir nokta, :hover gibi pointer sözde sınıflarıyla doğrudan kullanıldığında elementin fare imlecinden uzaklaşmasına neden olup titreme yapabilir. Bunun çözümü, dönüşümü bir üst kapsayıcıya uygulamaktır. translateY() tüm modern tarayıcılarda desteklenmektedir.
