CSS translateY() fonksiyonu, bir HTML öğesini dikey eksende belirtilen miktarda kaydırmak için kullanılır. Bu fonksiyon, transform özelliği içinde diğer dönüşüm fonksiyonlarıyla birlikte kullanılır. Pozitif bir değer öğeyi aşağı, negatif bir değer ise yukarı kaydırır. Örneğin, translateY(50%) ifadesi öğeyi kendi yüksekliğinin yarısı kadar aşağı kaydırırken, translateY(-50%) aynı miktarda yukarı kaydırır.
Bu fonksiyon, CSS Transforms Modülü Seviye 1 taslağında tanımlanmıştır. Sözdizimi oldukça basittir: translateY(). Yani, fonksiyon tek bir argüman alır ve bu argüman bir uzunluk (px, em, rem, ch vb.) veya yüzde değeri olabilir. Yüzde değerleri, öğenin kendi yüksekliğine göre hesaplanır. Örneğin, 100 piksel yüksekliğindeki bir öğeye translateY(40%) uygulanırsa, öğe 40 piksel aşağı kayar.
translateY() fonksiyonunun en büyük avantajlarından biri, belge akışını etkilememesidir. Yani, öğeyi kaydırdığınızda çevresindeki diğer öğelerin konumu değişmez; öğe sadece görsel olarak yeni konumuna taşınır. Bu, özellikle animasyonlar için idealdir çünkü sayfa düzenini bozmadan hareketli efektler oluşturmanıza olanak tanır. Ayrıca, translateY() performanslıdır çünkü sadece görsel katmanı etkiler ve yeniden düzenleme (reflow) tetiklemez.
Pratik kullanım örneklerinden biri, kart bileşenlerinin aşağıdan yukarıya doğru kayarak görünmesini sağlamaktır. Örneğin, bir dashboard üzerinde istatistik kartları (.stat-card) başlangıçta opaklık: 0 ve translateY(50px) ile aşağıda gizlenir. Ardından, bir tetikleyici (örneğin butona tıklama) ile bu kartlara opacity: 1 ve translateY(0) uygulanarak yukarı doğru kayarak görünür hale gelir. Hover durumunda ise translateY(-8px) ile hafifçe yukarı kalkarak mikro animasyon eklenebilir.
Diğer bir kullanım alanı, form alanlarındaki label animasyonlarıdır. MUI gibi kütüphanelerde sıkça görülen bir teknik: Input alanına odaklanıldığında label yukarı kayarak placeholder görevinden çıkar ve küçülerek label olur. Bu, translateY(-32px) scale(0.8) kombinasyonuyla yapılır. Label başlangıçta input içinde absolute konumlandırılır ve odaklanma ile birlikte yukarı kaydırılır. Bu sayede kullanıcı deneyimi zenginleştirilir.
translateY() kullanırken dikkat edilmesi gereken bir nokta, işaretçi (pointer) pseudo-sınıflarıyla (örneğin :hover) etkileşim sorunlarıdır. Öğe fare ile üzerine gelindiğinde çok uzağa kaydırılırsa, fare öğeyi takip edemeyebilir ve hover durumu kaybolur. Bu da öğenin sürekli olarak ileri geri hareket etmesine (titreme) neden olur. Çözüm, hover'ı bir üst kapsayıcıya uygulamak ve translate() fonksiyonunu iç öğeye vermektir. Örneğin, .parent:hover .child { transform: translateY(160px); } gibi.
Tarayıcı desteği açısından translateY() fonksiyonu, tüm modern tarayıcılarda temel düzeyde desteklenmektedir. CSS Transforms Modülü Seviye 1 hala Editör Taslağı aşamasında olmasına rağmen, işlevsellik yaygın olarak kullanılmaktadır. translateY() ile margin gibi özelliklerin aksine belge akışını bozmadan, performanslı ve esnek animasyonlar oluşturabilirsiniz.
Kaynak: css-tricks.com
