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