CSS translateX() fonksiyonu, bir HTML elementini yatay eksende belirtilen miktarda kaydırmak için kullanılan bir transform fonksiyonudur. Pozitif değerler elementi sağa, negatif değerler ise sola kaydırır. Örneğin, `translateX(50px)` elementi 50 piksel sağa, `translateX(-2rem)` ise 2 rem sola kaydırır. Yüzde değerleri ise elementin kendi genişliğine göre hesaplanır; `translateX(50%)`, elementin genişliğinin yarısı kadar sağa kaymasını sağlar. Bu fonksiyon, diğer transform fonksiyonlarıyla birlikte `transform` özelliği içinde kullanılır.
translateX() fonksiyonunun en yaygın kullanım alanlarından biri, menü butonuna tıklandığında kenar çubuğunun (sidebar) sayfaya kayarak girmesini sağlamaktır. Örneğin, kenar çubuğu başlangıçta `transform: translateX(-100%);` ile sayfanın dışına çıkarılır ve bir `.open` sınıfı eklendiğinde `transform: translateX(0);` ile görünür hale getirilir. Ayrıca, sonsuz kayan bant (marquee) efektleri oluşturmak için de kullanılır; burada `@keyframes` ile element sürekli olarak sola kaydırılır. Bir diğer örnek ise iskelet (skeleton) yükleyicilerindeki parıltı (shimmer) efektidir; `::after` sözde öğesi `translateX(-120%)` ile başlatılır ve animasyonla `translateX(120%)` değerine hareket ettirilerek kayar bir ışık efekti oluşturulur.
translateX() fonksiyonunun önemli bir özelliği, elementin belge akışını (document flow) etkilememesidir. Yani, element görsel olarak kaydırılsa da, orijinal konumundaki boşluk korunur ve çevresindeki diğer elementler yer değiştirmez. Bu, margin veya position gibi özelliklerden farklıdır. Ancak, `:hover` gibi sözde sınıflarla doğrudan kullanıldığında sorun yaşanabilir; element fare imlecinden uzaklaştığında `:hover` durumu kaybolur ve element eski konumuna döner, bu da sürekli titreşime (flickering) neden olur. Bu sorunu çözmek için, kaydırılacak element bir üst kapsayıcı içine alınmalı ve `:hover` sınıfı kapsayıcıya uygulanmalıdır.
CSS translateX() fonksiyonu, CSS Transforms Module Level 1 spesifikasyonunda tanımlanmıştır ve tüm modern tarayıcılar tarafından desteklenmektedir. Kullanımı basit ve etkilidir; animasyonlar, geçişler ve görsel efektler oluşturmak için idealdir. Özellikle kullanıcı arayüzü etkileşimlerinde ve yükleme animasyonlarında sıkça tercih edilir. Doğru kullanıldığında, web sayfalarına akıcı ve profesyonel bir görünüm kazandırır.
