Funkcia translate

Funkcia translate nastavuje posun prvku pozdĺž osi X a osi Y. Používa sa spoločne s vlastnosťou transform. Hodnotou vlastnosti sú ľubovoľné jednotky pre veľkosť.

Môže prijímať jeden alebo dva parametre. Ak sú parametre dva - prvý parameter nastavuje posun pozdĺž osi X, a druhý - pozdĺž osi Y. Ak je parameter jeden, tak nastavuje posun pozdĺž osi X.

Hodnoty parametrov môžu byť pozitívne a negatívne. Pozitívna hodnota pozdĺž osi X posúva doprava, negatívna - doľava. Pozitívna hodnota pozdĺž osi Y posúva dole, negatívna - hore.

Syntax

selektor {
	transform: translate(posun pozdĺž osi X, posun pozdĺž osi Y);
}

Príklad

Ak na blok nasmerujete myš - posunie sa o 30px doprava:

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

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

Príklad

Ak na blok nasmerujete myš - posunie sa o 30px doľava:

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

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

Príklad

Ak na blok nasmerujete myš - posunie sa o 15px doprava a o 30px dole:

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

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

Pozrite tiež

funkciu translateX,
ktorá nastavuje posun pozdĺž osi X
funkciu translateY,
ktorá nastavuje posun pozdĺž osi Y