CSS function translateX()

Використання

TranslateX() - ця функція в CSS використовується для зсуву елемента по горизонталі. Вона дозволяє змінити положення елемента відносно його вихідної позиції вздовж горизонтальної осі.

Ця функція приймає один аргумент, який вказує величину зсуву по горизонталі. Позитивне значення зсуває елемент вправо, а негативне - вліво. Наприклад, якщо ви хочете зсунути елемент на 100 пікселів вправо, використайте такий CSS:

transform: translateX(100px);

Цей код зсуне елемент вправо на 100 пікселів від його початкового положення.

Значення, які використовуються у функції translateX(), можуть бути позитивними або негативними. Позитивне значення зсуває елемент вправо, а негативне - вліво. Наприклад, такий код:

transform: translateX(-50%);

зсуне елемент вліво на 50% від його ширини.

Нотатка:	Значення може бути вказане в пікселях (`px`), відсотках (`%`), відносних одиницях (`em`, `rem`) або використовувати ключові слова, такі як `left`, `right`, `center` і т.д.
Нотатка:	Позитивне значення зсуває елемент вправо, а негативне - вліво.
Порада:	Функція `translateX()` дозволяє точно позиціонувати елементи на сторінці, і вона є корисним інструментом для створення анімацій та зміни положення елементів. Ви можете використовувати різні одиниці вимірювання або ключові слова, такі як `left`, `right`, `center` і т.д., щоб досягти бажаного зсуву. За допомогою функції `translateX()` можна створювати ефектні дизайни та рухові елементи на вашому веб-сайті.

Синтаксис

transform: translateX(value);

<word>: Ключові слова, які визначають положення елемента, наприклад left, right, center і т.д.
<length>: Величина зсуву в пікселях/відсотках/відносних одиницях
<number>: Число без одиниці. В початковій системі координат еквівалентно пікселям у батьківському середовищі.

Переглядач
	1	3.5	3.1	10.5	12

Переглядач
	2	18	4	3.2

Мобільних переглядачів ще не додано.

Приклади

Приклад 1
Приклад 2

При наведенні курсору на блок, він буде зсуватись по горизонталі на 200 пікселів вправо.


  See the Pen <a href="https://codepen.io/BonD007-the-flexboxer/pen/ExOYeZW">
  	translateX()</a> by BonD007 (<a href="https://codepen.io/BonD007-the-flexboxer">@BonD007-the-flexboxer</a>)
  on <a href="https://codepen.io">CodePen</a>.

Приклад використання translateX() для зсуву елемента по горизонталі.


  See the Pen <a href="https://codepen.io/BonD007-the-flexboxer/pen/WNYegEe">
  translateX() 2</a> by BonD007 (<a href="https://codepen.io/BonD007-the-flexboxer">@BonD007-the-flexboxer</a>)
  on <a href="https://codepen.io">CodePen</a>.

CSS довідник

CSS функції

CSS function translateX()

Використання

Синтаксис

Переглядачі

Приклади