Funksjonen translateX

Funksjonen translateX setter forskyvning av elementet langs X-aksen. Brukes sammen med egenskapen transform. Verdien til egenskapen er alle enheter for størrelse. Positiv verdi forskyver til høyre, negativ - til venstre.

Syntaks

cssvelger {
  transform: translateX(forskyvning);
}

Eksempel

Hvis du holder musepekeren over blokken - vil den forskyves 30px til høyre:

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

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

Результат:

Eksempel

Hvis du holder musepekeren over blokken - vil den forskyves 30px til venstre:

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

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

Результат:

Se også