Funkcija translateX

Funkcija translateX zadaje pomeranje elementa po X osi. Koristi se zajedno sa svojstvom transform. Vrednošću svojstva služe bilo koje jedinice za veličinu. Pozitivna vrednost pomera udesno, negativna - ulevo.

Sintaksa

cssselektor {
  transform: translateX(pomeraj);
}

Primer

Ako pređete mišem preko bloka - on će se pomeriti za 30px udesno:

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

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

Результат:

Primer

Ako pređete mišem preko bloka - on će se pomeriti za 30px ulevo:

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

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

Результат:

Pogledajte takođe