Funkcija translateY

Funkcija translateY nosaka elementa nobīdi pa Y asi. Izmanto kopā ar īpašību transform. Īpašības vērtību var norādīt jebkuras mērvienības izmēram. Pozitīva vērtība nobīda uz leju, negatīva - uz augšu.

Sintakse

cssselektors {
  transform: translateY(nobīde);
}

Piemērs

Ja ar peles kursoru uzvērsies virs bloka - tas nobīdīsies par 30px uz leju:

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

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

Результат:

Piemērs

Ja ar peles kursoru uzvērsies virs bloka - tas nobīdīsies par 30px uz augšu:

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

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

Результат:

Skatiet arī