Funktionen translate

Funktionen translate anger förskjutning av element längs X-axeln och Y-axeln. Används tillsammans med egenskapen transform. Värdet på egenskapen är vilka enheter för storlek som helst.

Kan ta en eller två parametrar. Om det finns två parametrar - den första parametern anger förskjutning längs X-axeln, och den andra - längs Y-axeln. Om det finns en parameter så anger den förskjutning längs X-axeln.

Parametrarnas värden kan vara positiva och negativa. Positivt värde längs X-axeln förskjuter åt höger, negativt - åt vänster. Positivt värde längs Y-axeln förskjuter neråt, negativt - uppåt.

Syntax

cssselector {
  transform: translate(förskjutning längs X-axeln, förskjutning längs Y-axeln);
}

Exempel

Om du håller 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: translate(30px);
}

Результат:

Exempel

Om du håller 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: translate(-30px);
}

Результат:

Exempel

Om du håller musen över blocket - kommer det att förskjutas 15px åt höger och 30px neråt:

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

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

Результат:

Se även