Funkcija translateY

Funkcija translateY zadaje pomeranje elementa po Y osi. Koristi se zajedno sa svojstvom transform. Vrednošću svojstva služe bilo koje jedinice za veličinu. Pozitivna vrednost pomera na dole, negativna - na gore.

Sintaksa

cssselektor {
  transform: translateY(pomeraj);
}

Primer

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

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

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

Результат:

Primer

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

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

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

Результат:

Pogledajte takođe