Funcția translate

Funcția translate stabilește deplasarea unui element pe axa X și axa Y. Este utilizată împreună cu proprietatea transform. Valoarea proprietății pot fi orice unități de măsură.

Poate accepta unul sau doi parametri. Dacă sunt doi parametri - primul parametru stabilește deplasarea pe axa X, iar al doilea - pe axa Y. Dacă este un singur parametru, atunci acesta stabilește deplasarea pe axa X.

Valorile parametrilor pot fi pozitive și negative. O valoare pozitivă pe axa X deplasează spre dreapta, una negativă - spre stânga. O valoare pozitivă pe axa Y deplasează în jos, una negativă - în sus.

Sintaxă

selector {
	transform: translate(deplasare pe axa X, deplasare pe axa Y);
}

Exemplu

Dacă plasezi mouse-ul peste bloc - acesta se va deplasa cu 30px spre dreapta:

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

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

Exemplu

Dacă plasezi mouse-ul peste bloc - acesta se va deplasa cu 30px spre stânga:

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

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

Exemplu

Dacă plasezi mouse-ul peste bloc - acesta se va deplasa cu 15px spre dreapta și cu 30px în jos:

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

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

Vezi și

funcția translateX,
care stabilește deplasarea pe axa X
funcția translateY,
care stabilește deplasarea pe axa Y