Funktionen translateX

Funktionen translateX sätter förskjutningen av ett element längs X-axeln. Används tillsammans med egenskapen transform. Värdet på egenskapen är vilka enheter för storlek som helst. Ett positivt värde förskjuter åt höger, ett negativt värde åt vänster.

Syntax

selector {
	transform: translateX(förskjutning);
}

Exempel

Om du för musen över blocket kommer det att förskjutas 30px åt höger:

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

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

Exempel

Om du för musen över blocket kommer det att förskjutas 30px åt vänster:

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

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

Se även

funktionen translate,
som sätter förskjutning längs X- och Y-axlarna
funktionen translateY,
som sätter förskjutning längs Y-axeln