Fungsi translateX

Fungsi translateX menentukan anjakan elemen pada paksi X. Digunakan bersama dengan sifat transform. Nilai sifat adalah sebarang unit untuk saiz. Nilai positif mengalih ke kanan, nilai negatif - ke kiri.

Sintaks

cssselector {
  transform: translateX(anjakan);
}

Contoh

Jika tetikus dihalakan ke atas blok - ia akan dialihkan 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 tetikus dihalakan ke atas blok - ia akan dialihkan 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