Funktionen translateY

Funktionen translateY angiver flytning af et element langs Y-aksen. Den bruges sammen med egenskaben transform. Værdien for egenskaben er enhver enhed for størrelse. En positiv værdi flytter nedad, en negativ værdi flytter opad.

Syntaks

cssselektor {
  transform: translateY(flytning);
}

Eksempel

Hvis du fører musen over blokken, flyttes den 30px nedad:

html<div id="elem"></div>
css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform: translateY(30px);
}

Результат:

Eksempel

Hvis du fører musen over blokken, flyttes den 30px opad:

html<div id="elem"></div>
css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform: translateY(-30px);
}

Результат:

Se også

  • funktionen translate,
    som angiver flytning langs X- og Y-akserne
  • funktionen translateX,
    som angiver flytning langs X-aksen