Funkcija translate

Funkcija translate zadaje pomeranje elementa po X i Y osi. Koristi se zajedno sa svojstvom transform. Vrednost svojstva su bilo koje jedinice za veličinu.

Može prihvatiti jedan ili dva parametra. Ako su parametri dva - prvi parametar zadaje pomeranje po X osi, a drugi - po Y osi. Ako je parametar jedan, onda on zadaje pomeranje po X osi.

Vrednosti parametara mogu biti pozitivne i negativne. Pozitivna vrednost po X osi pomera desno, negativna - levo. Pozitivna vrednost po Y osi pomera dole, negativna - gore.

Sintaksa

cssselektor {
  transform: translate(pomeranje po X osi, pomeranje po Y osi);
}

Primer

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

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

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

Результат:

Primer

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

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

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

Результат:

Primer

Ako se mišem pređe preko bloka - on će se pomeriti 15px udesno i na 30px nadole:

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

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

Результат:

Pogledajte takođe