Урок 70 із 104
67%
← Назад

Точка трансформації в CSS

Вивчаємо властивість transform-origin, яка визначає точку, відносно якої виконується поворот, масштабування та інші CSS-трансформації.

Що таке transform-origin

Властивість transform-origin визначає точку, навколо якої виконується CSS-трансформація елемента.

За замовчуванням точка трансформації знаходиться в центрі елемента — 50% по горизонталі та 50% по вертикалі.

  • center — центр елемента.
  • top — верхня частина елемента.
  • right — права частина елемента.
  • bottom — нижня частина елемента.
  • left — ліва частина елемента.

Точка трансформації в центрі

.element { transform-origin: center; transform: rotate(45deg); }

Точка трансформації у верхньому лівому куті

.element { transform-origin: top left; transform: rotate(45deg); }

Точка трансформації через відсотки

Точку трансформації можна задавати у відсотках. Перше значення визначає положення по горизонталі, друге — по вертикалі.

.element { transform-origin: 0% 0%; transform: rotate(45deg); }
.element { transform-origin: 100% 50%; transform: rotate(45deg); }

Точка трансформації через пікселі

Положення точки можна задавати конкретними значеннями в пікселях.

.element { transform-origin: 20px 30px; transform: rotate(45deg); }

transform-origin разом із scale()

transform-origin впливає не тільки на поворот. Він також визначає, відносно якої точки буде виконуватися масштабування.

.element { transform-origin: left center; transform: scale(1.5); }

Поворот при наведенні

.element { transform-origin: left center; transition: transform 0.3s ease; } .element:hover { transform: rotate(10deg); }
❗ Важливо:

За замовчуванням transform-origin має значення 50% 50%, тобто центр елемента. Змінивши transform-origin, можна змусити елемент обертатися або масштабуватися навколо іншої точки.

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

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

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

Використайте transform-origin: top left та transform: rotate(45deg).

✅ Показати відповідь
.box { width: 100px; height: 100px; background-color: steelblue; transform-origin: top left; transform: rotate(45deg); }

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

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

Для точки трансформації використайте transform-origin: right center.

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

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

📌 Завдання:
  1. Створіть блок розміром 100px на 100px.
  2. Задайте transform-origin через відсотки.
  3. Точка трансформації повинна знаходитися в центрі лівого краю.
  4. Збільште блок у 1,5 раза.
<!-- Початковий код --> <div class="box"></div> <style> .box { width: 100px; height: 100px; background-color: seagreen; } </style>
💡 Показати підказку

Центр лівого краю — це 0% по X та 50% по Y.

✅ Показати відповідь
.box { width: 100px; height: 100px; background-color: seagreen; transform-origin: 0% 50%; transform: scale(1.5); }

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

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

Використайте transform-origin: center bottom та transition: transform 0.3s ease.

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