CSS translateY() fonksiyonu, bir HTML elementini dikey eksende belirtilen miktarda kaydırmak için kullanılır. Bu fonksiyon, transform özelliği içinde kullanılır ve elementin orijinal konumunu değiştirmeden görsel olarak yer değiştirmesini sağlar. Pozitif değerler elementi aşağı, negatif değerler ise yukarı kaydırır. Örneğin, translateY(50px) ifadesi elementi 50 piksel aşağı taşırken, translateY(-50px) 50 piksel yukarı taşır. Yüzde değerleri ise elementin kendi yüksekliğine göre hesaplanır; translateY(50%) elementi yüksekliğinin yarısı kadar aşağı kaydırır.
translateY() fonksiyonu, özellikle animasyonlarda ve kullanıcı etkileşimlerinde sıkça tercih edilir. Örneğin, bir kart bileşeninin sayfa yüklendiğinde aşağıdan yukarı doğru kayarak görünmesini sağlamak için kullanılabilir. Başlangıçta opacity: 0 ve translateY(50px) ile gizlenen kart, bir tetikleyici (örneğin butona tıklama) ile opacity: 1 ve translateY(0) değerine geçirilerek yumuşak bir geçiş elde edilir. Ayrıca, hover durumunda elementi yukarı kaydırarak mikro animasyonlar oluşturmak da mümkündür.
Form alanlarında da translateY() fonksiyonu yaratıcı bir şekilde kullanılabilir. Örneğin, MUI kütüphanesindeki TextField bileşeninde olduğu gibi, etiket başlangıçta placeholder olarak görünürken, kullanıcı alana odaklandığında etiket yukarı kayarak küçülür ve renk değiştirir. Bu, label elementine translateY(-32px) scale(0.8) uygulanarak elde edilir. Bu sayede kullanıcı deneyimi iyileştirilir ve form alanları daha modern görünür.
translateY() fonksiyonunun en önemli avantajlarından biri, belge akışını etkilememesidir. Yani bir element translateY ile kaydırıldığında, diğer elementlerin konumu değişmez; sadece görsel olarak taşınır. Bu, margin gibi özelliklerin aksine reflow sorunlarına yol açmaz. Ancak dikkat edilmesi gereken bir nokta, doğrudan :hover gibi sözde sınıflarla kullanıldığında elementin fare imlecinden uzaklaşması durumunda titreme sorunu oluşabilir. Bu sorunu çözmek için, hover durumu bir üst kapsayıcıya uygulanmalı ve translate işlemi alt elemente yapılmalıdır.
