Rekomendasi Kursus:

Fungsi translateY() CSS

Definisi dan Penggunaan CSS translateY() Fungsi ini memungkinkan Anda mengalihkan ulang elemen sepanjang sumbu y (arah vertikal).

translateY() Fungsi di Transform digunakan dalam properti.

Contoh

Pengalihan ulang elemen <div> yang berbeda sepanjang arah vertikal:

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

Coba Sendiri

Syarat CSS

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

Detil Teknologi

Versi: Modul Transformasi CSS Level 1

Dukungan Browser

Angka di tabel menunjukkan versi browser yang pertama yang mendukung fungsi ini penuh.

Chrome Edge Firefox Safari Opera
1 12 3.5 3.1 10.5

Halaman yang berhubungan

Panduan:Transformasi 2D CSS

Referensi:Atribut transform CSS

Referensi:Fungsi translate() CSS

Referensi:Fungsi translateX() CSS

Referensi:Atribut transform HTML DOM