Funkce translate

Funkce translate nastavuje posun prvku podél osy X a osy Y. Používá se společně se vlastností transform. Hodnotou vlastnosti jsou libovolné jednotky pro velikost.

Může přijímat jeden nebo dva parametry. Pokud jsou parametry dva - první parametr nastavuje posun podél osy X, a druhý - podél osy Y. Pokud je parametr jeden, pak nastavuje posun podél osy X.

Hodnoty parametrů mohou být kladné a záporné. Kladná hodnota podél osy X posouvá doprava, záporná - doleva. Kladná hodnota podél osy Y posouvá dolů, záporná - nahoru.

Syntaxe

cssselektor {
  transform: translate(posun podél osy X, posun podél osy Y);
}

Příklad

Pokud najedete myší na blok - posune se o 30px doprava:

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

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

Результат:

Příklad

Pokud najedete myší na blok - posune se o 30px doleva:

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

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

Результат:

Příklad

Pokud najedete myší na blok - posune se o 15px doprava a o 30px dolů:

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

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

Результат:

Viz také