Fungsi translateX

Fungsi translateX mengatur pergeseran elemen pada sumbu X. Digunakan bersama dengan properti transform. Nilai propertinya adalah satuan ukuran apa pun. Nilai positif menggeser ke kanan, nilai negatif menggeser ke kiri.

Sintaks

cssselektor {
  transform: translateX(pergeseran);
}

Contoh

Jika mouse diarahkan ke blok - blok akan bergeser sebesar 30px ke kanan:

html<div id="elem"></div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform: translateX(30px);
}

Результат:

Contoh

Jika mouse diarahkan ke blok - blok akan bergeser sebesar 30px ke kiri:

html<div id="elem"></div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform: translateX(-30px);
}

Результат:

Lihat juga