translateX-funktio
translateX-funktio asettaa elementin siirron
X-akselilla. Sitä käytetään yhdessä
transform-ominaisuuden kanssa.
Ominaisuuden arvona voi olla mikä tahansa koko-yksikkö.
Positiivinen arvo siirtää
oikealle, negatiivinen - vasemmalle.
Syntaksi
valitsija {
transform: translateX(siirto);
}
Esimerkki
Jos siirrät hiiren osoittimen lohkon päälle - se siirtyy
30px oikealle:
<div id="elem"></div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: translateX(30px);
}
:
Esimerkki
Jos siirrät hiiren osoittimen lohkon päälle - se siirtyy
30px vasemmalle:
<div id="elem"></div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: translateX(-30px);
}
:
Katso myös
-
translate-funktio,
joka asettaa siirron X- ja Y-akseleilla -
translateY-funktio,
joka asettaa siirron Y-akselilla
