Fungsi translateX
Fungsi translateX mengatur pergeseran elemen
pada sumbu X. Digunakan bersama dengan properti
transform.
Nilai propertinya adalah satuan ukuran apa pun.
Nilai positif menggeser ke kanan, nilai negatif menggeser ke kiri.
Sintaks
selektor {
transform: translateX(pergeseran);
}
Contoh
Jika mouse diarahkan 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: translateX(30px);
}
:
Contoh
Jika mouse diarahkan 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: translateX(-30px);
}
:
Lihat juga
-
fungsi
translate,
yang mengatur pergeseran pada sumbu X dan Y -
fungsi
translateY,
yang mengatur pergeseran pada sumbu Y
