CSS translateY() Fonksiyonu

Tanımı ve Kullanımı

CSS'nin translateY() Fonksiyon, elemanları y eksenine (dikey yönde) yeniden konumlandırmanıza olanak tanır.

translateY() Fonksiyonu transform Özelliklerinde kullanılır.

Örnek

Farklı <div> elementlerini dikey yönde yeniden konumlandırma:

#myDiv1 {
  transform: translateY(30px); /* Elemanı y eksenine 30px hareket ettir */
}
#myDiv2 {
  transform: translateY(50px); /* Elemanı y eksenine 50px hareket ettir */
}
#myDiv3 {
  transform: translateY(-10px); /* Elemanı y eksenine -10px hareket ettir */
}

Kişisel Deneyim

CSS Grameri

translateY(y)
Değer Açıklama
y Gerekli. Elemanın y eksenine hareket ettirilecek mesafeyi tanımlar, bu sayı veya yüzdesi olabilir.

Teknik Açıklamalar

Sürüm: CSS Transforms Modülü 1

Tarayıcı Desteği

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

Chrome Edge Firefox Safari Opera
1 12 3.5 3.1 10.5

İlgili Sayfalar

Eğitim:CSS 2D Transformasyon

Referans:CSS transform özelliği

Referans:CSS translate() fonksiyonu

Referans:CSS translateX() fonksiyonu

Referans:HTML DOM transform özelliği