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

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

Contoh

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

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

#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:

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

#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:

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

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

Lihat juga

fungsi translateX,
yang mengatur pergeseran sepanjang sumbu X
fungsi translateY,
yang mengatur pergeseran sepanjang sumbu Y