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