translateY-funktio

translateY-funktio määrittää elementin siirron Y-akselia pitkin. Sitä käytetään yhdessä transform-ominaisuuden kanssa. Ominaisuuden arvona voidaan käyttää mitä tahansa kookon yksiköitä. Positiivinen arvo siirtää alaspäin, negatiivinen - ylöspäin.

Syntaksi

cssvalitsija {
  transform: translateY(siirto);
}

Esimerkki

Jos siirrät hiiren osoittimen lohkon päälle - se siirtyy 30px alaspäin:

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

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

Результат:

Esimerkki

Jos siirrät hiiren osoittimen lohkon päälle - se siirtyy 30px ylöspäin:

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

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

Результат:

Katso myös