CSS'de bir elementi yatay eksende hareket ettirmek istediğinizde, translateX() fonksiyonu imdadınıza yetişir. Bu güçlü CSS dönüşüm (transform) fonksiyonu, elementi sağa veya sola kaydırarak görsel konumunu değiştirir, ancak belge akışını etkilemez. Yani elementin orijinal yeri boş kalmaz, diğer elementler kaymaz; sadece görüntü taşınır. Bu özellik, özellikle animasyonlar ve kullanıcı etkileşimleri için idealdir.
translateX() fonksiyonunun sözdizimi oldukça basittir: translateX(). Tek bir parametre alır: bu parametre, elementin ne kadar ve hangi yönde kayacağını belirler. Pozitif değerler (örneğin 50px) elementi sağa, negatif değerler (örneğin -40ch) ise sola kaydırır. Yüzde kullanıldığında, değer elementin kendi genişliğine göre hesaplanır. Örneğin 400 piksel genişliğindeki bir elemente translateX(50%) uygulandığında, element 200 piksel sağa kayar.
translateX() fonksiyonunun en yaygın kullanım alanlarından biri, kenar çubukları (sidebar) gibi elementleri sayfaya kaydırarak getirmektir. Örneğin, bir menü butonuna tıklandığında sol taraftan bir kenar çubuğu açmak istiyorsanız, başlangıçta kenar çubuğunu translateX(-100%) ile tamamen sayfa dışına taşıyabilir, ardından bir .open sınıfı ile translateX(0) yaparak görünür hale getirebilirsiniz. Bu işlem, CSS geçişleri (transition) ile birleştirildiğinde akıcı bir açılma efekti sağlar.
Bir diğer popüler kullanım, sonsuz kayan bantlar (marquee) oluşturmaktır. Örneğin, bir e-ticaret sitesinde yeni ürünleri duyurmak için kullanılan kayan metin şeritleri, translateX() ile kolayca yapılabilir. @keyframes ile tanımlanan bir animasyonda, 0% anında translateX(0) ile başlayıp 100% anında translateX(-50%) ile biten bir döngü oluşturarak, elementi sürekli olarak sola kaydırabilirsiniz. animation-iteration-count: infinite ile bu döngü sonsuz hale gelir.
Skeleton yükleyiciler (placeholder) de translateX() ile canlandırılabilir. Statik gri kutular yerine, bir ışıltı efekti (shimmer) ekleyerek kullanıcı deneyimini iyileştirebilirsiniz. Bunun için, skeleton elementinin ::after sözde öğesine translateX(-120%) ile başlangıç konumu verilir ve bir animasyonla bu değer translateX(120%)'ye kadar kaydırılır. Böylece, soldan sağa doğru ilerleyen bir ışık hüzmesi efekti elde edilir.
Nasıl Önlem Alınmalı?
translateX() kullanırken dikkat edilmesi gereken bir nokta, :hover gibi işaretçi sözde sınıflarıyla doğrudan kullanıldığında oluşabilecek titreme (flickering) sorunudur. Element fare imlecinin altından kaydığında :hover durumu kaybolur ve element eski haline döner. Bu döngü sürekli tekrarlanarak titremeye yol açar. Çözüm, dönüşümü bir üst öğeye uygulamak veya :hover'ı üst öğede tanımlayıp dönüşümü alt öğeye uygulamaktır.
Son olarak, translateX() fonksiyonu tüm modern tarayıcılarda sorunsuz çalışır. CSS Transforms Module Level 1 spesifikasyonunda tanımlanan bu fonksiyon, margin gibi diğer konumlandırma yöntemlerine göre daha performanslıdır çünkü yeniden akış (reflow) tetiklemez. Bu sayede, özellikle animasyonlarda akıcı ve verimli bir kullanım sunar.
Kaynak: css-tricks.com
