Rekomendasi kursus：

Fungsi translateX() CSS

Definisi dan penggunaan CSS translateX() Fungsi memungkinkan Anda memindahkan ulang elemen sepanjang sumbu x (arah horisontal).

translateX() Fungsi di Transform digunakan dalam properti.

Contoh

Pindahkan ulang elemen <div> yang berbeda sepanjang arah horisontal：

#myDiv1 {
  transform: translateX(50px); /* Memindahkan elemen sepanjang sumbu x 50px */
}
#myDiv2 {
  transform: translateX(100px); /* Memindahkan elemen sepanjang sumbu x 100px */
}
#myDiv3 {
  transform: translateX(-10px); /* Memindahkan elemen sepanjang sumbu x -10px */
}

Coba sendiri

Syntaks CSS

translateX(x)
Nilai Deskripsi
x Diperlukan. Definisi jarak pindah elemen sepanjang sumbu x, dapat berupa angka atau persen.

Detil teknis

Versi： Modul Transformasi CSS Level 1

Dukungan browser

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

Chrome Edge Firefox Safari Opera
1 12 3.5 3.1 10.5

页面相关

Panduan:Transformasi 2D CSS

Referensi:Atribut transform CSS

Referensi:Fungsi translate() CSS

Referensi:Fungsi translateY() CSS

Referensi:Atribut transform HTML DOM