CSS’in transform özelliği içinde kullanılan translate() fonksiyonu, bir HTML elemanını iki boyutlu düzlemde bulunduğu konumdan kaydırmaya yarar. Bu sayede elemanı yatay, dikey ya da her iki yönde hareket ettirebiliriz. translate(50px, %50) gibi bir kullanım, elemanı sağa 50 piksel ve aşağıya kendi genişliğinin yüzde 50’si kadar kaydırır. Bu fonksiyon, CSS Transforms Modülü Seviye 1 taslağında tanımlanmıştır ve modern tarayıcılar tarafından tam olarak desteklenir.
Fonksiyon iki parametre alır: tx (yatay kayma) ve ty (dikey kayma). tx pozitifse eleman sağa, negatifse sola gider. ty pozitifse aşağı, negatifse yukarı hareket eder. Tek parametre verildiğinde bu tx olarak kabul edilir. Değerler piksel, em gibi uzunluk birimleri veya yüzde olabilir. Yüzde değerleri, yatay için elemanın genişliğine, dikey için yüksekliğine göre hesaplanır. Örneğin translate(-%100) elemanı kendi genişliği kadar sola kaydırır.
translate()'in en yaygın kullanımlarından biri, mutlak konumlandırılmış elemanları ortalamaktır. top: %50 ve left: %50 ile elemanın sol üst köşesi merkeze gelir, ancak elemanın kendisi ortalanmaz. translate(-%50, -%50) ile eleman kendi boyutunun yarısı kadar geri kaydırılarak tam merkeze alınır. Ayrıca, diyagonal hareketler için de idealdir; örneğin bir toast bildirimini sağ alt köşeden kaydırarak getirmek için kullanılabilir. translate() sayesinde elemanlar akışı bozmaz, yani diğer elemanların yerini değiştirmez; sadece görsel olarak taşınır.
Ancak dikkat edilmesi gereken bir nokta, pointer olaylarıyla (örneğin :hover) kullanıldığında titreşim sorunu oluşabilir. Eleman fare imlecinden uzaklaştığında :hover sona erer ve eleman eski konumuna döner, bu da sürekli bir titremeye yol açar. Çözüm, taşınacak elemanı bir üst kapsayıcıya koyup :hover'ı kapsayıcıya uygulamaktır. Böylece kapsayıcının üzerinde fare bulunduğu sürece eleman taşınmış kalır. Bu basit teknik, kullanıcı deneyimini iyileştirir.
