Funktionen translateX

Funktionen translateX angiver en forskydning af elementet langs X-aksen. Den bruges sammen med egenskaben transform. Værdien for egenskaben er enhver enhed for størrelse. En positiv værdi forskydder til højre, en negativ til venstre.

Syntaks

cssselektor {
  transform: translateX(forskydning);
}

Eksempel

Hvis du fører musen over blokken, vil den forskydes 30px til højre:

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

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

Результат:

Eksempel

Hvis du fører musen over blokken, vil den forskydes 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å