Funkcia translateX

Funkcia translateX nastavuje posun prvku pozdĺž osi X. Používa sa spolu s vlastnosťou transform. Hodnotou vlastnosti sú ľubovoľné jednotky pre veľkosť. Kladná hodnota posúva doprava, záporná - doľava.

Syntax

cssselektor {
  transform: translateX(posun);
}

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: translateX(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: translateX(-30px);
}

Результат:

Pozrite tiež