Funkcija translate

Funkcija translate nustato elemento poslinkį išilgai X ašies ir Y ašies. Naudojama kartu su savybe transform. Vertėmis savybei gali būti bet kokie dydžio vienetai.

Gali priimti vieną arba du parametrus. Jei parametrų du - pirmasis parametras nustato poslinkį išilgai X ašies, o antrasis - išilgai Y ašies. Jei parametras vienas, tai jis nustato poslinkį išilgai X ašies.

Parametrų reikšmės gali būti teigiamos ir neigiamos. Teigiama reikšmė išilgai X ašies perkelia į dešinę, neigiama - į kairę. Teigiama reikšmė išilgai Y ašies perkelia žemyn, neigiama - aukštyn.

Sintaksė

cssselektorius {
  transform: translate(poslinkis išilgai X ašies, poslinkis išilgai Y ašies);
}

Pavyzdys

Jei užvesti pelės žymeklį ant bloko - jis pasislinks 30px į dešinę:

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

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

Результат:

Pavyzdys

Jei užvesti pelės žymeklį ant bloko - jis pasislinks 30px į kairę:

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

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

Результат:

Pavyzdys

Jei užvesti pelės žymeklį ant bloko - jis pasislinks 15px į dešinę ir 30px žemyn:

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

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

Результат:

Taip pat žiūrėkite