Funkcia translateY

Funkcia translateY nastavuje posun prvku po osi Y. Používa sa spolu s vlastnosťou transform. Hodnotou vlastnosti sú ľubovoľné jednotky pre veľkosť. Kladná hodnota posúva nadol, záporná - nahor.

Syntax

cssselektor {
  transform: translateY(posun);
}

Príklad

Ak na blok nasmerujete myš - posunie sa o 30px nadol:

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

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

Результат:

Príklad

Ak na blok nasmerujete myš - posunie sa o 30px nahor:

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

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

Результат:

Pozrite tiež