Funksjonen translate
Funksjonen translate setter forskyvning av element
langs X-aksen og Y-aksen. Brukes sammen
med egenskapen transform.
Verdien til egenskapen er alle enheter
for størrelse.
Kan ta én eller to parametere. Hvis det er to parametere - den første parameteren setter forskyvning langs X-aksen, og den andre - langs Y-aksen. Hvis det er én parameter, så setter den forskyvning langs X-aksen.
Parameterverdiene kan være positive og negative. Positiv verdi langs X-aksen forskyver til høyre, negativ - til venstre. Positiv verdi langs Y-aksen forskyver nedover, negativ - oppover.
Syntaks
velger {
transform: translate(forskyvning langs X-aksen, forskyvning langs Y-aksen);
}
Eksempel
Hvis du holder musepekeren over blokken - vil den forskyves
30px til høyre:
<div id="elem"></div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: translate(30px);
}
:
Eksempel
Hvis du holder musepekeren over blokken - vil den forskyves
30px til venstre:
<div id="elem"></div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: translate(-30px);
}
:
Eksempel
Hvis du holder musepekeren over blokken - vil den forskyves
15px til høyre og 30px nedover:
<div id="elem"></div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: translate(15px, 30px);
}
:
Se også
-
funksjonen
translateX,
som setter forskyvning langs X-aksen -
funksjonen
translateY,
som setter forskyvning langs Y-aksen