Функција 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 оси