Funkcja translateX
Funkcja translateX ustawia przesunięcie elementu
wzdłuż osi X. Używana razem z właściwością
transform.
Wartością właściwości są dowolne jednostki
rozmiaru. Wartość dodatnia przesuwa
w prawo, ujemna - w lewo.
Składnia
selektor {
transform: translateX(przesunięcie);
}
Przykład
Jeśli najedziesz myszką na blok - przesunie się on
o 30px w prawo:
<div id="elem"></div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: translateX(30px);
}
:
Przykład
Jeśli najedziesz myszką na blok - przesunie się on
o 30px w lewo:
<div id="elem"></div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: translateX(-30px);
}
:
Zobacz też
-
funkcję
translate,
która ustawia przesunięcie wzdłuż osi X i Y -
funkcję
translateY,
która ustawia przesunięcie wzdłuż osi Y
