Fungsi translate() CSS

Definisi dan penggunaan

CSS translate() Fungsi ini memungkinkan Anda mengubah lokasi elemen.

translate() Fungsi di transform digunakan dalam atribut.

Contoh

Ubah lokasi elemen:

#myDiv1 {
  transform: translate(50px); /* Menggerakkan elemen sepanjang sumbu x 50px dan sumbu y 0px */
}
#myDiv2 {
  transform: translate(50px, 20px); /* Menggerakkan elemen sepanjang sumbu x 50px dan sumbu y 20px */
}
#myDiv3 {
  transform: translate(100px, 30px); /* Menggerakkan elemen sepanjang sumbu x 100px dan sumbu y 30px */
}

Coba sendiri

Sintaksis CSS

translate(x, y)
Nilai Deskripsi
x Diperlukan. Tentukan jarak gerak elemen sepanjang sumbu x, dapat berupa angka atau persen.
y

Pilihan. Tentukan jarak gerak elemen sepanjang sumbu y, dapat berupa angka atau persen.

Jika dilewatkan, nilai diatur menjadi 0.

Detil teknikal

Versi: Modul Transformasi CSS Level 1

Dukungan perekap

Angka di dalam tabel menunjukkan versi perekap yang mendukung fungsi ini penuhnya.

Chrome Edge Firefox Safari Opera
1 12 3.5 3.1 10.5

Halaman yang berhubungan

Panduan:Transformasi 2D CSS

Rujukan：Sifat transform CSS

Rujukan：Fungsi translateX() CSS

Rujukan：Fungsi translateY() CSS

Rujukan：Sifat transform HTML DOM