Funkcija translate

Funkcija translate določa premik elementa po osi X in osi Y. Uporablja se skupaj z lastnostjo transform. Kot vrednost lastnosti so lahko uporabljene poljubne enote za velikost.

Lahko sprejme en ali dva parametra. Če sta parametra dva - prvi parameter določa premik po osi X, drugi pa po osi Y. Če je parameter en, potem določa premik po osi X.

Vrednosti parametrov so lahko pozitivne in negativne. Pozitivna vrednost po osi X premakne v desno, negativna - v levo. Pozitivna vrednost po osi Y premakne navzdol, negativna - navzgor.

Sintaksa

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

Primer

Če z miško postavite na blok - se bo ta premaknil za 30px v desno:

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

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

Primer

Če z miško postavite na blok - se bo ta premaknil za 30px v levo:

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

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

Primer

Če z miško postavite na blok - se bo ta premaknil za 15px v desno in za 30px navzdol:

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

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

Glejte tudi

funkcijo translateX,
ki določa premik po osi X
funkcijo translateY,
ki določa premik po osi Y