CSS'de elemanları taşımak için kullanılan translate() fonksiyonu, bir elemanı bulunduğu konumdan yatay, dikey veya her iki yönde kaydırmaya yarar. Bu fonksiyon, transform özelliği içinde kullanılır ve elemanın orijinal konumunu değiştirmeden görsel olarak yer değiştirmesini sağlar. Örneğin, translate(50px, 50%) ifadesi ile bir elemanı yatayda 50 piksel, dikeyde ise kendi genişliğinin yarısı kadar sağa ve aşağı kaydırabilirsiniz.
Fonksiyon iki argüman alır: tx (yatay kaydırma) ve ty (dikey kaydırma). tx pozitif ise eleman sağa, negatif ise sola gider. ty pozitif ise aşağı, negatif ise yukarı hareket eder. Eğer sadece bir argüman verilirse, bu tx olarak kabul edilir. Değerler uzunluk (px, em gibi) veya yüzde (%) olabilir. Yüzde değerleri, taşınan elemanın genişliğine (tx için) veya yüksekliğine (ty için) göre hesaplanır.
translate() fonksiyonunun en yaygın kullanımlarından biri, mutlak konumlandırılmış bir elemanı tam ortalamaktır. top: 50% ve left: 50% ile elemanın sol üst köşesi ortalanır, ardından translate(-50%, -50%) ile eleman kendi genişliğinin ve yüksekliğinin yarısı kadar geri kaydırılarak tam ortalanır. Ayrıca, diyalog ve toast bildirimleri gibi bileşenlerde sayfa dışından içeri kaydırma efektleri oluşturmak için de kullanılır.
Sistem Güvenliği
translate() fonksiyonunun önemli bir özelliği, belge akışını etkilememesidir. Yani, eleman taşındığında çevresindeki diğer elemanlar yer değiştirmez ve orijinal konumu boş kalmaz. Ancak, :hover gibi işaretçi sınıflarıyla doğrudan kullanıldığında, eleman fare imlecinden uzaklaşırsa sürekli titreme sorunu yaşanabilir. Bu durumda, taşınacak elemanı bir üst kapsayıcıya alıp :hover'ı kapsayıcıya uygulamak çözüm olur. translate() fonksiyonu, modern tarayıcıların tümünde desteklenir.
