CSS'deki translateX() fonksiyonu, bir HTML elementini yatay yönde belirtilen miktar kadar kaydırmak için kullanılır. Pozitif bir değer (örneğin 50px) elementi sağa, negatif bir değer (örneğin -40ch) ise sola taşır. Yüzde değerleri, elementin kendi genişliğine göre hesaplanır; örneğin translateX(50%) 400px genişliğindeki bir elementi 200px sağa kaydırır. Bu fonksiyon, transform özelliği içinde diğer dönüşüm fonksiyonlarıyla birlikte kullanılır ve CSS Transforms Modülü Seviye 1'de tanımlanmıştır.
translateX() fonksiyonu, özellikle animasyon ve geçiş efektlerinde sıkça kullanılır. Örneğin, bir yan menünün düğmeye tıklandığında soldan kayarak gelmesi için başlangıçta translateX(-100%) ile ekran dışına alınır, ardından .open sınıfı eklendiğinde translateX(0) ile normal konumuna döner. Bir diğer yaygın kullanım alanı, sonsuz dönen bantlar (marquee) oluşturmaktır. Burada @keyframes ile tanımlanan animasyonda, başlangıçta translateX(0) olan element, bitişte translateX(-50%) ile yarı genişlik kadar sola kaydırılır ve sonsuz döngü sağlanır.
Skeleton loader'lar da translateX() ile canlandırılabilir. Örneğin, bir skeleton elementinin ::after sözde öğesi, translateX(-120%) ile başlangıçta sol dışarıda konumlandırılır, ardından bir animasyonla translateX(120%)'ye kadar sağa kaydırılarak parıltı efekti oluşturulur. Bu sayede statik gri alanlar yerine hareketli ve kullanıcı dostu bir yükleme deneyimi sunulur. translateX()'in önemli bir özelliği de belge akışını etkilememesidir; yani element görsel olarak kaydırılsa da orijinal konumundaki boşluk korunur, bu da diğer elementlerin yer değiştirmesini engeller.
Uzmanların Görüşleri
Ancak dikkat edilmesi gereken bir nokta, translateX()'in :hover gibi sözde sınıflarla doğrudan kullanılması durumunda sorun çıkarabilmesidir. Element fare imlecinden uzaklaştığında :hover durumu kaybolur ve element eski konumuna döner, bu da sürekli titreşime neden olur. Çözüm, kaydırılacak elementi bir üst kapsayıcı içine almak ve :hover sınıfını kapsayıcıya uygulamaktır. Modern tarayıcıların tümü translateX() fonksiyonunu desteklemektedir.
