Fungsi translateY() CSS

Definisi dan penggunaan

CSS translateY() Fungsi memungkinkan Anda untuk menggerakkan elemen sepanjang sumbu y (arah vertikal).

translateY() Fungsi di transform digunakan dalam atribut.

Contoh

Menggerakkan elemen <div> yang berbeda sepanjang arah vertikal:

#myDiv1 {
  transform: translateY(30px); /* Menggerakkan elemen sepanjang sumbu y (30px) */
}
#myDiv2 {
  transform: translateY(50px); /* Menggerakkan elemen sepanjang sumbu y (50px) */
}
#myDiv3 {
  transform: translateY(-10px); /* Menggerakkan elemen sepanjang sumbu y (-10px) */
}

Coba sendiri

Sintaks CSS

translateY(y)
Nilai Deskripsi
y Diperlukan. Mempersifatkan jarak gerak elemen sepanjang sumbu y (sumbu vertikal), dapat berupa angka atau persen.

Detil teknis

Versi: Modul Transformasi CSS Level 1

Dukungan pereksa

Angka di dalam tabel menunjukkan versi pereksa pertama yang sepenuhnya mendukung fungsi ini.

Chrome Edge Firefox Safari Opera
1 12 3.5 3.1 10.5

Halaman berkaitan

Panduan:Transformasi 2D CSS

Rujukan:Sifat transform CSS

Rujukan:Fungsi translate() CSS

Rujukan:Fungsi translateX() CSS

Rujukan:Sifat transform HTML DOM