CSS 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	9

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

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

Приклади

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

<div id="description">
  <p>Цей код створює квадратний блок з класом .box. При наведенні курсору на блок, він буде зсуватись по горизонталі на 200 пікселів вправо.</p>
</div>

<div class="box"></div>

#description {
  font-style: italic;
  text-align: center;
  line-height: 1.5;
  margin-bottom: 50px;
  padding: 12px 16px;
  background-color: #f7f7f7;
  border: 1px solid #ccc;
}

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: transform 0.5s ease;
}

.box:hover {
  transform: translateX(200px);
}

<div class="box">
    <div class="mark">left: 50%</div>
</div>

<div class="box">
    <div class="mark centered">left: 50% + translateX(-50%)</div>
</div>

body {
    font-family: sans-serif;
    font-size: 15px;
    padding: 24px;
}

.box {
    position: relative;
    width: 520px;
    max-width: 100%;
    height: 62px;
    margin-bottom: 20px;
    border: 1px solid #cfd4d9;
}

.box::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    border-left: 1px dashed #b03030;
}

.mark {
    position: absolute;
    top: 14px;
    left: 50%;
    padding: 6px 12px;
    background: #2f6f9f;
    color: #fff;
    white-space: nowrap;
}

.centered {
    transform: translateX(-50%);
}

<div id="description">
  <p>Демонстрація роботи CSS-функції <code>translateX()</code>.</p>
</div>

<div class="result">
  <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E" alt="Sample image"> 
</div>
<div class="result">
  <img class="translated" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E" alt="Sample image">
</div>

#description {
  font-style: italic;
  text-align: center;
  line-height: 1.5;
  margin-bottom: 50px;
  padding: 12px 16px;
  background-color: #f7f7f7;
  border: 1px solid #ccc;
}

.translated {
  transform: translateX(60px);
}

.result {
  background: orange; 
}

.result:after {
  content: "\2190 x-axis \2192";
  float: right;
}