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ă

cssselector {
  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:

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

css#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:

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

css#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:

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

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

Результат:

Vezi și