Трансформація елементів за допомогою властивості CSS Transform.

Добре, готові, починаємо кодити! Але спочатку ось невелика жартівлива шутка, щоб розвеселити вашу подорож кодуванням. Чому розробники вибирають темний режим? Тому що світло привертає помилки. Надіюсь, це трохи вас розвеселило. Тепер давайте зануримося в захопливий світ властивості трансформації CSS.

Розуміння властивості трансформації CSS

Властивість трансформації CSS, досить магічно, дозволяє вам змінювати вигляд елемента, не впливаючи на розташування інших елементів навколо нього. Це саме той супергерой, якого вам потрібно для вашої подорожі у веб-розробку.
Подивіться навколо вашої веб-сторінки. Бачите ці статичні, звичайні елементи? Давайте трохи їх оживимо, використовуючи властивість трансформації CSS. До кінця цієї глави ви будете переміщати, обертати, масштабувати і нахиляти ці елементи, як крутий магік.

Розбір функцій трансформації CSS

Ви не розмовляєте жаргоном? Не хвилюйтеся! Ось просте пояснення функцій трансформації CSS.
1) Переміщення: Ця функція переміщує елемент з його поточного положення. Вгору, вниз, вліво, вправо – ви називайте!
2) Масштабування: Хочете зробити кнопку трохи більшою? Або занурити зображення трохи? Масштабування до вашої послуги!
3) Обертання: Ця функція дозволяє вашому елементу кружляти і вертітися в 2D просторі.
4) Нахил: Це гра “Твістер” для ваших елементів. Вона спотворює елементи вздовж вісей X та Y.

Перші кроки з трансформацією CSS

Перш ніж ми почнемо грати з функціями, додамо властивість ‘transform’ до нашого CSS файлу. Іноді кодування – це також про те, як ввічливо просити. Так що ви просто просите CSS “трансформувати” ваш елемент, будь ласка, у кутових дужках, звичайно!

#елементід {
  трансформація: функція;
}

Замініть “функцію” на вашу вибрану трансформацію.

Переміщення елементів

Функція переміщення дозволяє переміщати елементи вздовж вісі X (вліво або вправо) або Y (вгору або вниз).
Ось гарний код, щоб телепортувати ваш елемент на 50px вправо і на 100px вниз.

#елементід {
  трансформація: переміщення(50px, 100px);
}

Гра з масштабами

Функція масштабування працює як чарівний засіб. Трохи налити, і ваш елемент зменшиться. Додайте трохи більше, і от-от! Ваш елемент зросте.
Ось як подвоїти розмір елемента:

#елементід {
  трансформація: масштаб(2);
}

Веселощі з обертаннями та нахилами

#елементід {
  трансформація: обертання(20град);
}

Функція нахилення може спотворювати ваші елементи вздовж їх відносної вісі X або Y. Це майже як дзеркало веселого будиночка для ваших елементів.

#елементід {
  трансформація: нахил(30град);
}

Тепер, коли ми відкрили магічні двері властивості трансформації CSS, настав час експериментувати. Пам’ятайте, навчання CSS – це гра з лего – це все про те, як будувати ваші елементи по одному блоку за раз. І пам’ятайте, якщо з’явиться помилка, вона боїться вашої суперсили кодування, тому розберіться з нею з посмішкою і щипкою коду!
Наступним кроком буде поглиблене вивчення ‘Анімації трансформацій’. Слідкуйте за оновленнями та продовжуйте кодити!
_Сподіваюсь, вам сподобався виклад кодування з властивістю трансформації CSS. Щасливих експериментів!_