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
valitsija {
transform: translateY(siirto);
}
Esimerkki
Jos siirrät hiiren osoittimen lohkon päälle - se siirtyy
30px alaspäin:
<div id="elem"></div>
#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:
<div id="elem"></div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: translateY(-30px);
}
:
Katso myös
-
translate-funktio,
joka määrittää siirron X- ja Y-akseleita pitkin -
translateX-funktio,
joka määrittää siirron X-akselia pitkin
