Funktionen translateX

Funktionen translateX sätter förskjutningen av ett element längs X-axeln. Används tillsammans med egenskapen transform. Värdet på egenskapen är vilka enheter för storlek som helst. Ett positivt värde förskjuter åt höger, ett negativt värde åt vänster.

Syntax

cssselector {
  transform: translateX(förskjutning);
}

Exempel

Om du för musen över blocket kommer det att förskjutas 30px åt höger:

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

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

Результат:

Exempel

Om du för musen över blocket kommer det att förskjutas 30px åt vänster:

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

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

Результат:

Se även