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

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

Contoh

Jika tetikus dihalakan ke atas blok - ia akan beralih 30px ke kanan:

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

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

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

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

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

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

Lihat juga

fungsi translateX,
yang menentukan anjakan pada paksi X
fungsi translateY,
yang menentukan anjakan pada paksi Y