Функцијата translate

Функцијата translate задава поместување на елемент по оската X и оската Y. Се користи заедно со својството transform. Како вредност на својството се користат било кои единици за големина.

Може да прифати еден или два параметри. Ако параметрите се два - првиот параметар задава поместување по оската X, а вториот - по оската Y. Ако параметарот е еден, тогаш тој задава поместување по оската X.

Вредностите на параметрите можат да бидат позитивни и негативни. Позитивната вредност по оската X поместува надесно, негативната - налево. Позитивната вредност по оската Y поместува надолу, негативната - нагоре.

Синтакса

cssселектор {
  transform: translate(поместување по оската X, поместување по оската Y);
}

Пример

Ако се постави глувчето над блокот - тој ќе се помести за 30px надесно:

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

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

Результат:

Пример

Ако се постави глувчето над блокот - тој ќе се помести за 30px налево:

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

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

Результат:

Пример

Ако се постави глувчето над блокот - тој ќе се помести за 15px надесно и за 30px надолу:

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

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

Результат:

Погледнете исто така