Funcția translateY
Funcția translateY definește deplasarea elementului
pe axa Y. Este utilizată împreună cu proprietatea
transform.
Valoarea proprietății poate fi în orice unitate
de măsură. O valoare pozitivă deplasează elementul
în jos, iar una negativă - în sus.
Sintaxă
selector {
transform: translateY(deplasare);
}
Exemplu
Dacă treci mouse-ul peste bloc - acesta se va deplasa
cu 30px în jos:
<div id="elem"></div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: translateY(30px);
}
:
Exemplu
Dacă treci mouse-ul peste bloc - acesta se va deplasa
cu 30px în sus:
<div id="elem"></div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: translateY(-30px);
}
:
Veți și
-
funcția
translate,
care definește deplasarea pe axele X și Y -
funcția
translateX,
care definește deplasarea pe axa X
