Funkce translate

Funkce translate nastavuje posun prvku podél osy X a osy Y. Používá se společně se vlastností transform. Hodnotou vlastnosti jsou libovolné jednotky pro velikost.

Může přijímat jeden nebo dva parametry. Pokud jsou parametry dva - první parametr nastavuje posun podél osy X, a druhý - podél osy Y. Pokud je parametr jeden, pak nastavuje posun podél osy X.

Hodnoty parametrů mohou být kladné a záporné. Kladná hodnota podél osy X posouvá doprava, záporná - doleva. Kladná hodnota podél osy Y posouvá dolů, záporná - nahoru.

Syntaxe

selektor {
	transform: translate(posun podél osy X, posun podél osy Y);
}

Příklad

Pokud najedete myší na blok - posune se o 30px doprava:

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

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

Příklad

Pokud najedete myší na blok - posune se o 30px doleva:

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

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

Příklad

Pokud najedete myší na blok - posune se o 15px doprava a o 30px dolů:

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

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

Viz také

funkci translateX,
která nastavuje posun podél osy X
funkci translateY,
která nastavuje posun podél osy Y