translate()

Функція CSS translate() (перекласти) змінює положення елемента по горизонталі чи по вертикалі. Її результат має тип даних <transform-function>.

Спробуйте його в дії

Таке перетворення характеризується двовимірним вектором. Його координати визначають те, наскільки елемент пересувається за кожною з осей координат.

Синтаксис

/* Одинарне значення <length-percentage> */
transform: translate(200px);
transform: translate(50%);

/* Подвійне значення <length-percentage> */
transform: translate(100px, 200px);
transform: translate(100px, 50%);
transform: translate(30%, 200px);
transform: translate(30%, 50%);

Значення

Одинарне значення <length-percentage>

Таке значення – <length> чи <percentage>, що представляє координату за віссю абсцис (по горизонталі, осі X) вектора перекладу. Ордината (значення по вертикалі, осі Y) вектора перекладу вважатиметься 0. Наприклад, translate(2px) рівносильно translate(2px, 0). Відсоткове значення береться від ширини референтної рамки, визначеної властивістю transform-box.

Подвійне значення <length-percentage>

Таке значення описує два значення <length> чи <percentage>, що представляють і абсцису (координату X), і ординату (координату Y) вектора перекладу. Відсоткове значення на першій позиції береться від ширини, а на другій – від висоти референтної рамки, визначеної властивістю transform-box.

Формальний синтаксис

translate(<a href="/uk/docs/Web/CSS/length-percentage"><code>&lt;length-percentage&gt;</code></a>, <a href="/uk/docs/Web/CSS/length-percentage"><code>&lt;length-percentage&gt;</code></a>?)

Приклади

Використання одновісного перекладу

HTML

<div>Статичний</div>
<div class="moved">Переміщений</div>
<div>Статичний</div>

CSS

div {
  width: 60px;
  height: 60px;
  background-color: skyblue;
}

.moved {
  /* Рівносильно: translateX(10px) і translate(10px, 0) */
  transform: translate(10px);
  background-color: pink;
}

Результат

Поєднання перекладу за осями X та Y

HTML

<div>Статичний</div>
<div class="moved">Переміщений</div>
<div>Статичний</div>

CSS

div {
  width: 60px;
  height: 60px;
  background-color: skyblue;
}

.moved {
  transform: translate(10px, 10px);
  background-color: pink;
}

Результат

Специфікації

              <br />
              <small>
                  # funcdef-transform-translate
                </small>
            </a>
          </td>
        </tr>
      </tbody>
    </table>