Translate-funktio

translate-funktio asettaa elementin siirron X-akselilla ja Y-akselilla. Sitä käytetään yhdessä transform-ominaisuuden kanssa. Ominaisuuden arvona voidaan käyttää mitä tahansa koko-yksikköä.

Se voi ottaa yhden tai kaksi parametria. Jos parametreja on kaksi - ensimmäinen parametri asettaa siirron X-akselilla ja toinen Y-akselilla. Jos parametria on vain yksi, se asettaa siirron X-akselilla.

Parametrien arvot voivat olla positiivisia tai negatiivisia. Positiivinen arvo X-akselilla siirtää oikealle, negatiivinen - vasemmalle. Positiivinen arvo Y-akselilla siirtää alas, negatiivinen - ylös.

Syntaksi

cssvalitsija {
  transform: translate(siirto X-akselilla, siirto Y-akselilla);
}

Esimerkki

Jos viet hiiren blokin päälle - se siirtyy 30px oikealle:

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

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

Результат:

Esimerkki

Jos viet hiiren blokin päälle - se siirtyy 30px vasemmalle:

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

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

Результат:

Esimerkki

Jos viet hiiren blokin päälle - se siirtyy 15px oikealle ja 30px alas:

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

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

Результат:

Katso myös