Die translate-funksie

Die funksie translate stel die verskuiwing van 'n element op die X-as en Y-as. Dit word saam gebruik met die eienskap transform. Die waarde van die eienskap is enige eenhede vir grootte.

Dit kan een of twee parameters aanvaar. As daar twee parameters is - stel die eerste parameter die verskuiwing op die X-as, en die tweede een - op die Y-as. As daar een parameter is, stel dit die verskuiwing op die X-as.

Parameterwaardes kan positief en negatief wees. 'n Positiewe waarde op die X-as skuif na regs, 'n negatiewe - na links. 'n Positiewe waarde op die Y-as skuif afwaarts, 'n negatiewe - opwaarts.

Sintaksis

selekteerder {
	transform: translate(verskuiwing op X-as, verskuiwing op Y-as);
}

Voorbeeld

As jy die muis oor die blok beweeg - sal dit verskuif met 30px na regs:

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

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

Voorbeeld

As jy die muis oor die blok beweeg - sal dit verskuif met 30px na links:

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

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

Voorbeeld

As jy die muis oor die blok beweeg - sal dit verskuif met 15px na regs en met 30px afwaarts:

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

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

Sien ook

die funksie translateX,
wat verskuiwing op die X-as stel
die funksie translateY,
wat verskuiwing op die Y-as stel