CSS'de elemanları taşımak için kullanılan translate() fonksiyonu, bir elemanın varsayılan konumundan iki boyutlu düzlemde kaydırılmasını sağlar. Bu sayede elemanları yatay, dikey veya her iki yönde yeniden konumlandırabiliriz. Örneğin, bir kutu üzerine hover yapıldığında 50 piksel sağa ve %50 aşağı hareket ettirmek için .parent:hover .box { transform: translate(50px, 50%); } kullanılabilir. translate() fonksiyonu, transform özelliği içinde diğer dönüşüm fonksiyonlarıyla birlikte kullanılır.
Sözdizimi oldukça basittir: translate(tx, ty) şeklinde iki argüman alır. tx yatay, ty ise dikey kaymayı belirtir. Pozitif değerler sağa/aşağı, negatif değerler sola/yukarı hareket ettirir. Ty isteğe bağlıdır; tek argüman girildiğinde sadece yatay kayma olur. Değerler uzunluk (px, em vb.) veya yüzde olabilir. Yüzde değerleri, tx için elemanın genişliğine, ty için yüksekliğine göre hesaplanır. Örneğin, translate(100px) elemanı 100 piksel sağa, translate(-50%) ise kendi genişliğinin yarısı kadar sola kaydırır.
translate() fonksiyonunun en yaygın kullanım alanlarından biri, absolute konumlandırılmış elemanları ortalamaktır. top: 50% ve left: 50% ile merkeze alınan eleman, transform: translate(-50%, -50%) ile kendi boyutunun yarısı kadar geri kaydırılarak tam ortalanır. Ayrıca, diyagonal hareketler oluşturmak için de idealdir. Örneğin, bir toast bildirimi sağ alt köşeden kayarak gelmesi için translate(40px, 40px) ile başlangıç konumundan uzaklaştırılır ve show sınıfı eklendiğinde translate(0,0) yapılarak yerine gelmesi sağlanır.
Teknik Analiz
translate() fonksiyonunun önemli bir özelliği, diğer dönüşüm fonksiyonları gibi belge akışını etkilememesidir. Yani eleman görsel olarak taşınırken çevresindeki elemanların konumu değişmez ve orijinal alanı boş kalmaz. Bu, margin gibi diğer konumlandırma yöntemlerine göre daha performanslıdır, çünkü reflow tetiklemez. Ancak dikkat edilmesi gereken bir nokta, doğrudan :hover gibi sözde sınıflarla kullanıldığında elemanın fare imlecinden uzaklaşıp titremeye neden olabilmesidir. Bu sorunu çözmek için dönüşüm, üst öğeye uygulanan :hover ile tetiklenmelidir.
