A translateX függvény

A translateX függvény az elem eltolását határozza meg az X tengely mentén. A transform tulajdonsággal együtt használható. Értéke bármilyen mértékegység lehet. Pozitív érték jobbra tol, negatív érték balra.

Szintaxis

cssszelektor {
  transform: translateX(eltolás);
}

Példa

Ha az egérmutatót a blokkra visszük - az eltolódik 30px-t jobbra:

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

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

Результат:

Példa

Ha az egérmutatót a blokkra visszük - az eltolódik 30px-t balra:

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

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

Результат:

Lásd még