Fungsi translate

Fungsi translate mengatur pergeseran elemen sepanjang sumbu X dan sumbu Y. Digunakan bersama dengan properti transform. Nilai propertinya adalah satuan ukuran apa pun.

Dapat menerima satu atau dua parameter. Jika parameternya dua - parameter pertama mengatur pergeseran sepanjang sumbu X, dan yang kedua - sepanjang sumbu Y. Jika parameternya satu, maka itu mengatur pergeseran sepanjang sumbu X.

Nilai parameter bisa positif dan negatif. Nilai positif sepanjang sumbu X menggeser ke kanan, nilai negatif - ke kiri. Nilai positif sepanjang sumbu Y menggeser ke bawah, nilai negatif - ke atas.

Sintaksis

cssselektor {
  transform: translate(pergeseran sepanjang sumbu X, pergeseran sepanjang sumbu Y);
}

Contoh

Jika mengarahkan mouse 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: translate(30px);
}

Результат:

Contoh

Jika mengarahkan mouse 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: translate(-30px);
}

Результат:

Contoh

Jika mengarahkan mouse ke blok - blok akan bergeser sebesar 15px ke kanan dan sebesar 30px ke bawah:

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

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

Результат:

Lihat juga