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(<length-percentage>, <length-percentage>?)<length>Величина зсуву в пікселях/відсотках/відносних одиницях
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
1 |
3.5 |
3.1 |
10.5 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
2 |
18 |
4 |
3.2 |
Мобільних переглядачів ще не додано.
Приклади
При наведенні курсору на блок, він переміщується.
Блок зсувається на 40 пікселів вниз.