CSS function translateX

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

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

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

transform: translateX(100px);

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

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

transform: translateX(-50%);

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

правити

Порада

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

автор: Bond правити

Нотатка

Значення може бути вказане в пікселях (px), відсотках (%), відносних одиницях (em, rem) або використовувати ключові слова, такі як left, right, center і т.д.

автор: Bond правити

Нотатка

Позитивне значення зсуває елемент вправо, а негативне - вліво.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

transform: translateX(value);

Функція translateX може отримувати 3 значень:

<length>

Величина зсуву в пікселях/відсотках/відносних одиницях

автор: Bond

правити

<word>

Ключові слова, які визначають положення елемента, наприклад left, right, center і т.д.

автор: Bond

правити

<number>

Число без одиниці. В початковій системі координат еквівалентно пікселям у батьківському середовищі.

автор: Bond

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

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

Підтримка: мобільні переглядачі

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

Приклади

+ запропонувати свій приклад у пісочниці