Функция 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);
}

Результат:

Вижте също