Funkcija translate

Funkcija translate zadaje pomeranje elementa po X i Y osi. Koristi se zajedno sa svojstvom transform. Vrednost svojstva su bilo koje jedinice za veličinu.

Može prihvatiti jedan ili dva parametra. Ako su parametri dva - prvi parametar zadaje pomeranje po X osi, a drugi - po Y osi. Ako je parametar jedan, onda on zadaje pomeranje po X osi.

Vrednosti parametara mogu biti pozitivne i negativne. Pozitivna vrednost po X osi pomera desno, negativna - levo. Pozitivna vrednost po Y osi pomera dole, negativna - gore.

Sintaksa

selektor {
	transform: translate(pomeranje po X osi, pomeranje po Y osi);
}

Primer

Ako se mišem pređe preko bloka - on će se pomeriti 30px udesno:

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

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

Primer

Ako se mišem pređe preko bloka - on će se pomeriti 30px ulevo:

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

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

Primer

Ako se mišem pređe preko bloka - on će se pomeriti 15px udesno i na 30px nadole:

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

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

Pogledajte takođe

funkciju translateX,
koja zadaje pomeranje po X osi
funkciju translateY,
koja zadaje pomeranje po Y osi