Funktionen translate

Funktionen translate angiver forskydning af et element langs X-aksen og Y-aksen. Anvendes sammen med egenskaben transform. Værdien af egenskaben er enhver enhed for størrelse.

Kan tage en eller to parametre. Hvis der er to parametre - angiver den første parameter forskydning langs X-aksen, og den anden - langs Y-aksen. Hvis der kun er én parameter, angiver den forskydning langs X-aksen.

Parametrenes værdier kan være positive og negative. En positiv værdi langs X-aksen forskydder til højre, en negativ - til venstre. En positiv værdi langs Y-aksen forskydder nedad, en negativ - opad.

Syntaks

cssselektor {
  transform: translate(forskydning langs X-aksen, forskydning langs Y-aksen);
}

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

Результат:

Eksempel

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

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

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

Результат:

Se også