Functie translate

De functie translate specificeert de verschuiving van een element langs de X-as en Y-as. Wordt gebruikt in combinatie met de eigenschap transform. De waarde kan elke eenheid voor grootte zijn.

Kan één of twee parameters accepteren. Als er twee parameters zijn - specificeert de eerste parameter de verschuiving langs de X-as, en de tweede - langs de Y-as. Als er één parameter is, dan specificeert deze de verschuiving langs de X-as.

Parameterwaarden kunnen positief en negatief zijn. Een positieve waarde langs de X-as verschuift naar rechts, een negatieve - naar links. Een positieve waarde langs de Y-as verschuift naar beneden, een negatieve - naar boven.

Syntaxis

selector {
	transform: translate(verschuiving langs X-as, verschuiving langs Y-as);
}

Voorbeeld

Als je de muis over het blok beweegt - verschuift het 30px naar rechts:

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

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

Voorbeeld

Als je de muis over het blok beweegt - verschuift het 30px naar links:

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

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

Voorbeeld

Als je de muis over het blok beweegt - verschuift het 15px naar rechts en 30px naar beneden:

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

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

Zie ook

de functie translateX,
die de verschuiving langs de X-as specificeert
de functie translateY,
die de verschuiving langs de Y-as specificeert