CSS translate() Fonksiyonu

Tanımı ve Kullanımı

CSS'nin translate() Fonksiyon, elemanın konumunu değiştirmenize olanak tanır.

translate() Fonksiyon transform Öznitelikte kullanılır.

Örnek

Elemanın konumunu değiştirme:

#myDiv1 {
  transform: translate(50px); /* Elemanı x eksenine doğru 50px, y eksenine doğru 0px hareket ettirir */
}
#myDiv2 {
  transform: translate(50px, 20px); /* Elemanı x eksenine doğru 50px, y eksenine doğru 20px hareket ettirir */
}
#myDiv3 {
  transform: translate(100px, 30px); /* Elemanı x eksenine doğru 100px, y eksenine doğru 30px hareket ettirir */
}

Kişisel Deneyim

CSS Grameri

translate(x, y)
Değer Açıklama
x Gerekli. Elemanın x eksenine doğru hareket etme mesafesini tanımlar, sayı veya yüzdelik olabilir.
y

Opsiyonel. Elemanın y eksenine doğru hareket etme mesafesini tanımlar, sayı veya yüzdelik olabilir.

Atlanırsa, değeri 0 olarak ayarlanır.

Teknik Ayrıntılar

Sürüm: CSS Çevirme Modülü 1

Tarayıcı Desteği

Tabloda gösterilen rakamlar, bu fonksiyonu tamamen destekleyen ilk tarayıcı sürümünü belirtir.

Chrome Edge Firefox Safari Opera
1 12 3.5 3.1 10.5

İlgili Sayfalar

Eğitim:CSS 2D Çevirme

Referans:CSS transform özelliği

Referans:CSS translateX() fonksiyonu

Referans:CSS translateY() fonksiyonu

Referans:HTML DOM transform özelliği