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