Funkcija translate

Funkcija translate nosaka elementa nobīdi pa X asi un Y asi. Tiek lietota kopā ar īpašību transform. Kā vērtība tiek lietotas jebkuras vienības izmēram.

Var pieņemt vienu vai divus parametrus. Ja parametru ir divi - pirmais parametrs nosaka nobīdi pa X asi, bet otrais - pa Y asi. Ja parametrs ir viens, tad tas nosaka nobīdi pa X asi.

Parametru vērtības var būt pozitīvas un negatīvas. Pozitīva vērtība pa X asi pārbīda pa labi, negatīva - pa kreisi. Pozitīva vērtība pa Y asi pārbīda uz leju, negatīva - uz augšu.

Sintakse

selektors {
	transform: translate(nobīde pa X asi, nobīde pa Y asi);
}

Piemērs

Ja ar peli novedīsiet virs bloka - tas pārbīdīsies par 30px pa labi:

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

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

Piemērs

Ja ar peli novedīsiet virs bloka - tas pārbīdīsies par 30px pa kreisi:

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

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

Piemērs

Ja ar peli novedīsiet virs bloka - tas pārbīdīsies par 15px pa labi un par 30px uz leju:

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

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

Skatiet arī

funkciju translateX,
kas nosaka nobīdi pa X asi
funkciju translateY,
kas nosaka nobīdi pa Y asi