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