CSS translate() işlevi, bir elemanı iki boyutlu düzlemde varsayılan konumundan kaydırarak yatay, dikey veya her iki yönde yeniden konumlandırmamızı sağlar. Bu işlev, diğer dönüşüm fonksiyonlarıyla birlikte transform özelliği içinde kullanılır. translate() işlevi, CSS Transformlar Modülü Seviye 1 taslağında tanımlanmıştır.
translate() işlevinin sözdizimi şu şekildedir: translate(, ? ). Yani bir veya iki uzunluk veya yüzde değeri alabilir. İlk parametre (tx) yatay eksendeki kaymayı belirtir; pozitif değer sağa, negatif değer sola hareket ettirir. İkinci parametre (ty) ise dikey eksendeki kaymayı belirtir; pozitif değer aşağı, negatif değer yukarı hareket ettirir. Sadece bir parametre verilirse, bu tx olarak kabul edilir. Yüzde değerleri, yatayda elemanın genişliğine, dikeyde ise yüksekliğine göre hesaplanır.
translate() işlevi, mutlak konumlandırılmış bir elemanı ortalamak gibi yaygın kullanım alanlarına sahiptir. Geleneksel yöntem, elemanı üstten ve soldan %50 kaydırdıktan sonra translate(-50%, -50%) ile kendi boyutunun yarısı kadar geri çekmektir. Ayrıca, diyagonal hareketler için translateX() ve translateY() kombinasyonu yerine kullanılabilir. Örneğin, bir bildirim bileşenini sağ alt köşeden sayfaya kaydırmak için translate(40px, 40px) kullanılabilir ve show sınıfı eklendiğinde bu değer sıfırlanarak diyagonal bir giriş animasyonu elde edilir.
Nasıl Önlem Alınmalı?
translate() işlevinin önemli bir özelliği, belge akışını etkilememesidir. Yani eleman görsel olarak kaydırılsa da, çevresindeki diğer elemanları etkilemez ve orijinal konumu boşluk olarak kalır. Bu, margin gibi yeniden akış tetikleyen özelliklerden farklıdır. Ancak, :hover gibi işaretçi sözde sınıflarıyla doğrudan kullanıldığında, elemanın fare imlecinden uzaklaşması sonucu sürekli titreme (flicker) sorunu oluşabilir. Bu sorunu çözmek için, dönüştürülecek eleman bir üst kapsayıcıya yerleştirilmeli ve :hover sınıfı kapsayıcıya uygulanmalıdır. translate() işlevi, tüm modern tarayıcılarda temel düzeyde desteklenmektedir.
