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ă

cssselector {
  transform: translateX(deplasare);
}

Exemplu

Dacă plasați cursorul mouse-ului peste bloc - acesta se va deplasa cu 30px spre dreapta:

html<div id="elem"></div>

css#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:

html<div id="elem"></div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform: translateX(-30px);
}

Результат:

Vedeți și