CSS function translate

Опис

translate() дозволяє зміщувати елементи на сторінці, створювати анімації та рухові ефекти. Ця функція дозволяє контролювати розташування елементів відносно їх початкової позиції. Вона приймає два аргументи: зсув по горизонталі (вісь X) та зсув по вертикалі (вісь Y).

Приклади використання

Зсув по горизонталі та вертикалі:

Для зсуву елемента на 20 пікселів вправо та 10 пікселів вниз від його початкового положення, використовуйте:

transform: translate(20px, 10px);

Зсув тільки по горизонталі:

Щоб зсунути елемент на 50% його ширини вправо від початкового положення, використовуйте:

transform: translate(50%, 0);

Це може бути корисно для горизонтального центрування елемента.

Зсув тільки по вертикалі:

Для зсуву елемента на 2 розміри шрифту (em) вгору від його початкового положення, використовуйте:

transform: translate(0, -2em);

Це може бути використано для вирівнювання елементів по вертикалі.

Зворотний зсув:

Якщо вам потрібно повернути елемент до його початкового положення, використовуйте від'ємні значення для зсуву. Наприклад:

transform: translate(-50px, -50px);

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

правити

Порада

Функцію translate() можна використовувати разом з іншими властивостями CSS, наприклад, з трансформаціями (transform), переходами (transition) або анімаціями (animation).

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

Порада

Якщо потрібно виконати зміщення тільки по одній вісі (горизонталі або вертикалі), можна встановити значення 0 для другого аргументу. Наприклад, translate(20px, 0) зсуне елемент тільки вправо на 20 пікселів.

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

Порада

Ця функція дозволяє легко контролювати позицію елементів і може бути дуже корисною для створення захоплюючих анімацій та рухових ефектів на сторінці. Ви можете експериментувати з різними значеннями, щоб досягти потрібного вам зсуву.

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

Нотатка

Функція translate() зазвичай використовується для анімації руху елементів на сторінці, створення паралакс-ефектів, вирівнювання або розташування елементів в заданому місці.

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

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

Синтаксис

translate(<length-percentage>, <length-percentage>?)

Функція translate може отримувати єдине значення:

<length>

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

автор: Bond

правити

Переглядачі

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

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

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

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

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

Приклади

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