Funkcija translate

Funkcija translate nustato elemento poslinkį išilgai X ašies ir Y ašies. Naudojama kartu su savybe transform. Vertėmis savybei gali būti bet kokie dydžio vienetai.

Gali priimti vieną arba du parametrus. Jei parametrų du - pirmasis parametras nustato poslinkį išilgai X ašies, o antrasis - išilgai Y ašies. Jei parametras vienas, tai jis nustato poslinkį išilgai X ašies.

Parametrų reikšmės gali būti teigiamos ir neigiamos. Teigiama reikšmė išilgai X ašies perkelia į dešinę, neigiama - į kairę. Teigiama reikšmė išilgai Y ašies perkelia žemyn, neigiama - aukštyn.

Sintaksė

selektorius {
	transform: translate(poslinkis išilgai X ašies, poslinkis išilgai Y ašies);
}

Pavyzdys

Jei užvesti pelės žymeklį ant bloko - jis pasislinks 30px į dešinę:

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

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

Pavyzdys

Jei užvesti pelės žymeklį ant bloko - jis pasislinks 30px į kairę:

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

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

Pavyzdys

Jei užvesti pelės žymeklį ant bloko - jis pasislinks 15px į dešinę ir 30px žemyn:

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

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

Taip pat žiūrėkite

funkciją translateX,
kuri nustato poslinkį išilgai X ašies
funkciją translateY,
kuri nustato poslinkį išilgai Y ašies