CSS'in translateY() fonksiyonu, bir HTML elemanını dikey eksende (Y ekseni) belirtilen miktarda kaydırmak için kullanılır. Pozitif değerler elemanı aşağı, negatif değerler ise yukarı taşır. Bu fonksiyon, transform özelliği içinde diğer dönüşüm fonksiyonlarıyla birlikte kullanılır ve CSS Transforms Module Level 1 taslağında tanımlanmıştır. Temel sözdizimi translateY(
translateY() fonksiyonunun argümanı, elemanın kendi yüksekliğine göre veya mutlak bir uzunluk birimiyle belirtilir. Örneğin, translateY(80px) elemanı 80 piksel aşağı kaydırırken, translateY(-24ch) 24 karakter genişliği kadar yukarı taşır. Yüzde değerleri elemanın yüksekliğine göredir: translateY(50%) elemanı kendi yüksekliğinin yarısı kadar aşağı, translateY(-100%) ise tam yüksekliği kadar yukarı kaydırır. Bu esneklik, özellikle duyarlı (responsive) tasarımlarda işe yarar.
translateY() fonksiyonunun en önemli avantajlarından biri, belge akışını (document flow) bozmamasıdır. Bir elemanı translateY ile kaydırdığınızda, orijinal konumu sayfa düzeninde korunur ve diğer elemanlar etkilenmez. Bu, margin gibi özelliklerin aksine yeniden akış (reflow) tetiklemez. Örneğin, absolute konumlandırılmış bir elemanı translateY(40px) ile kaydırmak, çevresindeki elemanların yerini değiştirmez; sadece görsel olarak taşınır.
translateY() fonksiyonu, özellikle animasyonlarda sıkça kullanılır. Kart bileşenleri (stat-card) için aşağıdan yukarı kayarak gelen pop-up efektleri oluşturulabilir. Başlangıçta opacity: 0 ve translateY(50px) ile gizlenen elemanlar, bir tetikleyiciyle (örneğin, .dashboard.active sınıfı) opacity: 1 ve translateY(0) yapılarak görünür hale gelir. Ayrıca hover durumunda translateY(-8px) ile hafif bir yukarı kayma eklenerek mikro animasyonlar yapılabilir.
Form alanlarında da translateY() yaratıcı şekilde kullanılabilir. Örneğin, MUI kütüphanesindeki TextField bileşeninde olduğu gibi, label başlangıçta placeholder olarak input içinde konumlanır. Kullanıcı input'a odaklandığında label, translateY(-32px) scale(0.8) ile yukarı kayarak küçülür ve etiket görevi üstlenir. Bu işlem, CSS geçişleri (transition) ile yumuşatılarak kullanıcı deneyimi artırılır.
Detaylar ve Etkileri
translateY() kullanırken dikkat edilmesi gereken bir nokta, doğrudan :hover gibi sözde sınıflarla (pseudo-class) kullanıldığında oluşabilecek titreme sorunudur. Eleman fare imlecinden uzaklaştığında hover durumu kaybolur ve eleman eski konumuna döner, bu da sürekli bir titremeye yol açar. Çözüm, hover'ı üst öğeye (parent) uygulamak ve translateY'yi alt öğeye vermektir. Böylece üst öğe hover durumunu korurken alt öğe güvenle kayar.
translateY() fonksiyonu tüm modern tarayıcılarda desteklenmektedir. CSS Transforms Module Level 1 spesifikasyonu henüz Editör Taslağı (Editor's Draft) aşamasında olsa da, translateY() uzun süredir kararlı bir şekilde kullanılmaktadır. Bu fonksiyon, özellikle animasyon ve geçişlerde belge akışını bozmadan çalışması nedeniyle tercih edilir. Ayrıca, performans açısından da margin gibi özelliklere göre daha verimlidir çünkü yalnızca görsel katmanı etkiler.
Uzmanların Görüşleri
Sonuç olarak, CSS translateY() fonksiyonu, elemanları dikeyde kaydırmak için basit ve güçlü bir araçtır. Animasyonlardan form alanlarına, kart tasarımlarından hover efektlerine kadar geniş bir kullanım alanı vardır. Belge akışını bozmaması, performans avantajı ve tarayıcı desteği sayesinde modern web tasarımının vazgeçilmezlerindendir. Ancak hover gibi etkileşimlerde dikkatli kullanılmalı, gerektiğinde üst öğe aracılığıyla uygulanmalıdır.
Kaynak: css-tricks.com
