Fungsi translate() CSS

Definisi dan penggunaan

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

translate() Fungsi di transform digunakan dalam atribut.

Contoh

Ubah posisi 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

Sintaks CSS

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

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

Jika disingkirkan, nilai diatur menjadi 0.

Detil teknis

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 terkait

Tutorial:Transformasi 2D CSS

Referensi：Atribut transform CSS

Referensi：Fungsi translateX() CSS

Referensi：Fungsi translateY() CSS

Referensi：Atribut transform HTML DOM