Урок 69 із 104
66%
← Назад

Зсув елемента в CSS

Вивчаємо функції translateX(), translateY() та translate(), які дозволяють зміщувати елемент по горизонталі, вертикалі або одночасно по обох осях.

Що таке translate()

Функції translateX(), translateY() та translate() використовуються разом із властивістю transform для зміщення елемента відносно його початкового положення.

Відстань зміщення можна задавати в пікселях (px), відсотках (%) та інших одиницях CSS.

  • translateX() — зміщує елемент по горизонтальній осі X.
  • translateY() — зміщує елемент по вертикальній осі Y.
  • translate() — дозволяє одночасно задати зміщення по X та Y.

Зсув по осі X через translateX()

Функція translateX() зміщує елемент по горизонталі. Додатне значення зміщує його праворуч, а від'ємне — ліворуч.

.element { transform: translateX(50px); }

Зсув по осі Y через translateY()

Функція translateY() зміщує елемент по вертикалі. Додатне значення зміщує його вниз, а від'ємне — вгору.

.element { transform: translateY(30px); }

Зсув по двох осях через translate()

Функція translate() може приймати одне або два значення. Перше значення задає зміщення по X, друге — по Y.

.element { transform: translate(50px, 20px); }

Якщо вказати тільки одне значення, воно застосовується по X, а зміщення по Y буде дорівнювати 0.

.element { transform: translate(50px); }

Від'ємне значення

.element { transform: translateX(-30px); }

Зсув при наведенні

.element { transition: transform 0.3s ease; } .element:hover { transform: translateY(-10px); }
❗ Важливо:

Функції translateX(), translateY() та translate() змінюють візуальне положення елемента, не змінюючи його місце в потоці документа. Для плавного зміщення використовуйте transition: transform.

Практичне завдання

Практичне завдання 1

📌 Завдання:
  1. Створіть блок розміром 100px на 100px.
  2. Змістіть його на 50px праворуч за допомогою translateX().
<!-- Початковий код --> <div class="box"></div> <style> .box { width: 100px; height: 100px; background-color: steelblue; } </style>
💡 Показати підказку

Використайте transform: translateX(50px).

✅ Показати відповідь
.box { width: 100px; height: 100px; background-color: steelblue; transform: translateX(50px); }

Практичне завдання 2

📌 Завдання:
  1. Створіть блок розміром 100px на 100px.
  2. Змістіть його на 30px вгору за допомогою translateY().
<!-- Початковий код --> <div class="box"></div> <style> .box { width: 100px; height: 100px; background-color: tomato; } </style>
💡 Показати підказку

Щоб змістити елемент вгору, використайте від'ємне значення: translateY(-30px).

✅ Показати відповідь
.box { width: 100px; height: 100px; background-color: tomato; transform: translateY(-30px); }

Практичне завдання 3

📌 Завдання:
  1. Створіть блок розміром 100px на 100px.
  2. Змістіть його на 40px праворуч і на 20px вниз.
  3. Використайте функцію translate().
<!-- Початковий код --> <div class="box"></div> <style> .box { width: 100px; height: 100px; background-color: seagreen; } </style>
💡 Показати підказку

Використайте transform: translate(40px, 20px).

✅ Показати відповідь
.box { width: 100px; height: 100px; background-color: seagreen; transform: translate(40px, 20px); }

Практичне завдання 4

📌 Завдання:
  1. Створіть кнопку.
  2. При наведенні зміщуйте її на 10px вгору.
  3. Зробіть зміщення плавним.
<!-- Початковий код --> <button class="button">Навести курсор</button> <style> .button { padding: 10px 20px; border: none; background-color: royalblue; color: white; cursor: pointer; } </style>
💡 Показати підказку

Додайте transition: transform 0.3s ease і використайте translateY(-10px) у стані :hover.

✅ Показати відповідь
.button { padding: 10px 20px; border: none; background-color: royalblue; color: white; cursor: pointer; transition: transform 0.3s ease; } .button:hover { transform: translateY(-10px); }