Funkcia translate

Funkcia translate nastavuje posun prvku pozdĺž osi X a osi Y. Používa sa spoločne s vlastnosťou transform. Hodnotou vlastnosti sú ľubovoľné jednotky pre veľkosť.

Môže prijímať jeden alebo dva parametre. Ak sú parametre dva - prvý parameter nastavuje posun pozdĺž osi X, a druhý - pozdĺž osi Y. Ak je parameter jeden, tak nastavuje posun pozdĺž osi X.

Hodnoty parametrov môžu byť pozitívne a negatívne. Pozitívna hodnota pozdĺž osi X posúva doprava, negatívna - doľava. Pozitívna hodnota pozdĺž osi Y posúva dole, negatívna - hore.

Syntax

cssselektor {
  transform: translate(posun pozdĺž osi X, posun pozdĺž osi Y);
}

Príklad

Ak na blok nasmerujete myš - posunie sa o 30px doprava:

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

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

Результат:

Príklad

Ak na blok nasmerujete myš - posunie sa o 30px doľava:

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

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

Результат:

Príklad

Ak na blok nasmerujete myš - posunie sa o 15px doprava a o 30px dole:

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

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

Результат:

Pozrite tiež