Funktionen translate

Funktionen translate angiver forskydning af et element langs X-aksen og Y-aksen. Anvendes sammen med egenskaben transform. Værdien af egenskaben er enhver enhed for størrelse.

Kan tage en eller to parametre. Hvis der er to parametre - angiver den første parameter forskydning langs X-aksen, og den anden - langs Y-aksen. Hvis der kun er én parameter, angiver den forskydning langs X-aksen.

Parametrenes værdier kan være positive og negative. En positiv værdi langs X-aksen forskydder til højre, en negativ - til venstre. En positiv værdi langs Y-aksen forskydder nedad, en negativ - opad.

Syntaks

selektor {
	transform: translate(forskydning langs X-aksen, forskydning langs Y-aksen);
}

Eksempel

Hvis du fører musen over blokken, vil den forskydes 30px til højre:

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

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

Eksempel

Hvis du fører musen over blokken, vil den forskydes 30px til venstre:

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

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

Eksempel

Hvis du fører musen over blokken, vil den forskydes 15px til højre og 30px nedad:

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

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

Se også

funktionen translateX,
som angiver forskydning langs X-aksen
funktionen translateY,
som angiver forskydning langs Y-aksen