CSS'de translateX() fonksiyonu, bir HTML elementini yatay eksende belirtilen miktar kadar kaydırmak için kullanılır. Bu fonksiyon, transform özelliği içinde diğer dönüşüm fonksiyonlarıyla birlikte çalışır. translateX() ile elementler sağa (pozitif değer) veya sola (negatif değer) hareket ettirilebilir. Örneğin, translateX(50px) ifadesi elementi 50 piksel sağa, translateX(-30%) ise elementin kendi genişliğinin %30'u kadar sola kaydırır. Bu fonksiyon, CSS Transforms Modülü Seviye 1 taslağında tanımlanmıştır ve tüm modern tarayıcılar tarafından desteklenmektedir.
translateX() fonksiyonunun sözdizimi oldukça basittir: translateX(). Burada parametresi, elementin ne kadar ve hangi yönde kayacağını belirler. Uzunluk birimleri (px, em, ch gibi) kullanıldığında mutlak değerlerle çalışılır; yüzde (%) kullanıldığında ise elementin kendi genişliğine göre oransal kaydırma yapılır. Örneğin, 400 piksel genişliğindeki bir elemente translateX(50%) uygulanırsa, element 200 piksel sağa kayar. Negatif değerler sola kaydırma sağlar.
translateX() fonksiyonunun en yaygın kullanım alanlarından biri, sidebar veya menü gibi elementleri sayfa dışına çıkarıp kullanıcı etkileşimiyle içeri alma animasyonlarıdır. Örneğin, bir sidebara başlangıçta transform: translateX(-100%) verilerek tamamen sol dışarı çıkarılır, ardından bir JavaScript ile .open sınıfı eklendiğinde transform: translateX(0) yapılarak yerine getirilir. Ayrıca, sonsuz kayan marquee (bilgi bandı) animasyonları da translateX() ile kolayca oluşturulabilir. @keyframes içinde %0'da translateX(0), %100'de translateX(-50%) tanımlanarak element yarı genişliği kadar sola kayar ve sonsuz döngüye alınır.
Önemli Gelişmeler
translateX() fonksiyonunun önemli bir özelliği, diğer transform fonksiyonları gibi belge akışını etkilememesidir. Yani, element görsel olarak kaydırılsa da, orijinal konumu boşluk olarak kalır ve çevresindeki elementlerin yerleşimi değişmez. Bu, margin gibi özelliklerden farklıdır; margin elementleri kaydırırken reflow'a neden olur. Ancak, translateX() kullanırken dikkat edilmesi gereken bir nokta: element fareyle üzerine gelindiğinde (hover) kaydırılıyorsa, element fare imlecinden uzaklaşacağı için hover durumu kaybolur ve element eski yerine döner, bu da titreme (flicker) sorununa yol açar. Bu sorunu çözmek için, kaydırılacak elementi bir kapsayıcı içine alıp hover'ı kapsayıcıya uygulamak gerekir.
