Fungsi translate

Fungsi translate menentukan anjakan elemen pada paksi X dan paksi Y. Digunakan bersama dengan sifat transform. Nilai sifat adalah sebarang unit untuk saiz.

Boleh menerima satu atau dua parameter. Jika parameter dua - parameter pertama menentukan anjakan pada paksi X, dan kedua - pada paksi Y. Jika parameter satu, maka ia menentukan anjakan pada paksi X.

Nilai parameter boleh positif dan negatif. Nilai positif pada paksi X mengalihkan ke kanan, negatif - ke kiri. Nilai positif pada paksi Y mengalihkan ke bawah, negatif - ke atas.

Sintaks

cssselector {
  transform: translate(anjakan pada paksi X, anjakan pada paksi Y);
}

Contoh

Jika tetikus dihalakan ke atas blok - ia akan beralih 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 tetikus dihalakan ke atas blok - ia akan beralih 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 tetikus dihalakan ke atas blok - ia akan beralih 15px ke kanan dan 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