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

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

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

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

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

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

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

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

Результат:

Skatiet arī