CSS'de bir elementi konumlandırmanın birçok yolu vardır, ancak translate() fonksiyonu özellikle iki boyutlu düzlemde hassas kaydırmalar yapmak için idealdir. Bu fonksiyon, transform özelliği içinde kullanılır ve elementin orijinal konumundan yatay (tx) ve dikey (ty) eksende ne kadar kaydırılacağını belirler. Örneğin, translate(50px, 50%) ifadesi, elementi 50 piksel sağa ve kendi genişliğinin %50'si kadar aşağı taşır. Bu sayede, elementlerin konumlarını akışı bozmadan görsel olarak değiştirebiliriz.
translate() fonksiyonu, uzunluk (px, em gibi) veya yüzde (%) değerleri alır. Yüzde değerleri, elementin kendi genişliğine (tx için) veya yüksekliğine (ty için) göre hesaplanır. Tek argüman verildiğinde bu yatay kaydırma olarak kabul edilir; iki argüman verildiğinde ise sırasıyla yatay ve dikey kaydırmayı ifade eder. Örneğin, translate(-100%) elementi kendi genişliği kadar sola taşırken, translate(50px, 100px) 50 piksel sağa ve 100 piksel aşağı taşır. Bu esneklik, responsive tasarımlarda oranlama yapmayı kolaylaştırır.
translate() fonksiyonunun en yaygın kullanım alanlarından biri, mutlak konumlandırılmış elementleri ortalamaktır. top: 50% ve left: 50% ile elementi konteynırın ortasına yerleştirdikten sonra transform: translate(-50%, -50%) ile elementi kendi boyutunun yarısı kadar geri çekerek tam ortalama sağlanır. Ayrıca, diyagonal hareketler için de idealdir; örneğin bir bildirim (toast) bileşenini sağ alt köşeden sayfaya kaydırmak için translate(40px, 40px) kullanılıp, .show sınıfı eklendiğinde translate(0,0) yapılarak akıcı bir giriş animasyonu oluşturulabilir.
Unutulmaması gereken önemli bir nokta, translate() fonksiyonunun diğer transform fonksiyonları gibi belge akışını etkilememesidir. Element görsel olarak taşınsa da orijinal konumu boşluğu korur ve çevresindeki elementlerin yerini değiştirmez. Bu, margin gibi özelliklerden farklıdır. Ayrıca, translate()'i :hover gibi işaretçi sınıflarıyla doğrudan kullanmak, element fare imlecinden uzaklaştığında titreşim sorunlarına yol açabilir. Bunun çözümü, dönüşümü bir üst kapsayıcıya uygulamak ve :hover'ı kapsayıcıya atamaktır. Tüm modern tarayıcılar tarafından desteklenen translate(), CSS Transforms Modülü Seviye 1 taslağında tanımlanmıştır.
