Функция 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