Функцыя translateX

Функцыя translateX задае зрух элемента па восі X. Выкарыстоўваецца сумесна з уласцівасцю transform. Значэннем уласцівасці служыць любыя адзінкі вымярэння памеру. Дадатнае значэнне зрушчае направа, адмоўнае - налева.

Сінтаксіс

cssселектар {
  transform: translateX(зрух);
}

Прыклад

Калі навесці курсорам на блок - ён зрушыцца на 30px направа:

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

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

Результат:

Прыклад

Калі навесці курсорам на блок - ён зрушыцца на 30px налева:

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

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

Результат:

Глядзіце таксама