Функцијата translate

Функцијата translate задава поместување на елемент по оската X и оската Y. Се користи заедно со својството transform. Како вредност на својството се користат било кои единици за големина.

Може да прифати еден или два параметри. Ако параметрите се два - првиот параметар задава поместување по оската X, а вториот - по оската Y. Ако параметарот е еден, тогаш тој задава поместување по оската X.

Вредностите на параметрите можат да бидат позитивни и негативни. Позитивната вредност по оската X поместува надесно, негативната - налево. Позитивната вредност по оската Y поместува надолу, негативната - нагоре.

Синтакса

селектор {
	transform: translate(поместување по оската X, поместување по оската Y);
}

Пример

Ако се постави глувчето над блокот - тој ќе се помести за 30px надесно:

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

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

Пример

Ако се постави глувчето над блокот - тој ќе се помести за 30px налево:

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

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

Пример

Ако се постави глувчето над блокот - тој ќе се помести за 15px надесно и за 30px надолу:

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

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

Погледнете исто така

функцијата translateX,
која задава поместување по оската X
функцијата translateY,
која задава поместување по оската Y