Funktionen translate

Funktionen translate anger förskjutning av element längs X-axeln och Y-axeln. Används tillsammans med egenskapen transform. Värdet på egenskapen är vilka enheter för storlek som helst.

Kan ta en eller två parametrar. Om det finns två parametrar - den första parametern anger förskjutning längs X-axeln, och den andra - längs Y-axeln. Om det finns en parameter så anger den förskjutning längs X-axeln.

Parametrarnas värden kan vara positiva och negativa. Positivt värde längs X-axeln förskjuter åt höger, negativt - åt vänster. Positivt värde längs Y-axeln förskjuter neråt, negativt - uppåt.

Syntax

selector {
	transform: translate(förskjutning längs X-axeln, förskjutning längs Y-axeln);
}

Exempel

Om du håller 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: translate(30px);
}

Exempel

Om du håller 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: translate(-30px);
}

Exempel

Om du håller musen över blocket - kommer det att förskjutas 15px åt höger och 30px neråt:

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

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

Se även

funktionen translateX,
som anger förskjutning längs X-axeln
funktionen translateY,
som anger förskjutning längs Y-axeln