Funksjonen translate

Funksjonen translate setter forskyvning av element langs X-aksen og Y-aksen. Brukes sammen med egenskapen transform. Verdien til egenskapen er alle enheter for størrelse.

Kan ta én eller to parametere. Hvis det er to parametere - den første parameteren setter forskyvning langs X-aksen, og den andre - langs Y-aksen. Hvis det er én parameter, så setter den forskyvning langs X-aksen.

Parameterverdiene kan være positive og negative. Positiv verdi langs X-aksen forskyver til høyre, negativ - til venstre. Positiv verdi langs Y-aksen forskyver nedover, negativ - oppover.

Syntaks

cssvelger {
  transform: translate(forskyvning langs X-aksen, forskyvning langs Y-aksen);
}

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: translate(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: translate(-30px);
}

Результат:

Eksempel

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

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

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

Результат:

Se også