Funcția translateX
Funcția translateX stabilește deplasarea elementului
pe axa X. Este utilizată împreună cu proprietatea
transform.
Valoarea proprietății sunt orice unități
de măsură. O valoare pozitivă îl deplasează
spre dreapta, una negativă - spre stânga.
Sintaxă
selector {
transform: translateX(deplasare);
}
Exemplu
Dacă plasați cursorul mouse-ului peste bloc - acesta se va deplasa
cu 30px spre dreapta:
<div id="elem"></div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: translateX(30px);
}
:
Exemplu
Dacă plasați cursorul mouse-ului peste bloc - acesta se va deplasa
cu 30px spre stânga:
<div id="elem"></div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: translateX(-30px);
}
:
Vedeți și
-
funcția
translate,
care stabilește deplasarea pe axele X și Y -
funcția
translateY,
care stabilește deplasarea pe axa Y
