Functie translateY

De functie translateY bepaalt de verschuiving van een element langs de Y-as. Wordt gebruikt in combinatie met de eigenschap transform. De waarde van de eigenschap kan elke eenheid voor grootte zijn. Een positieve waarde schuift naar beneden, een negatieve waarde naar boven.

Syntaxis

cssselector {
  transform: translateY(verschuiving);
}

Voorbeeld

Als je met de muis over het blok beweegt - schuift het 30px naar beneden:

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

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

Результат:

Voorbeeld

Als je met de muis over het blok beweegt - schuift het 30px naar boven:

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

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

Результат:

Zie ook