Пошук уроків, статей та іншого контенту
Застосуєте переміщення, масштабування, обертання та нахил елементів через CSS-властивість transform.
transformВластивість transform змінює візуальне представлення елемента:
переміщує його;
масштабує;
обертає;
нахиляє.
Трансформація не змінює звичайний потік документа. Інші елементи продовжують розташовуватися так, ніби трансформований елемент залишився на початковому місці.
.element {
transform: функція-трансформації(значення);
}До одного елемента можна застосувати кілька трансформацій:
.element {
transform: translateX(20px) rotate(10deg) scale(1.1);
}Порядок функцій має значення: браузер застосовує їх послідовно.
Для переміщення елемента використовують функцію translate().
translate()Функція приймає два значення:
.element {
transform: translate(30px, 20px);
}30px — переміщення по горизонталі;
20px — переміщення по вертикалі.
Додатне значення переміщує елемент праворуч або вниз, від’ємне — ліворуч або вгору.
.element {
transform: translate(-20px, -10px);
}Якщо потрібно змінити положення лише по одній осі, можна використати окремі функції:
.element {
transform: translateX(40px);
}.element {
transform: translateY(-15px);
}Також можна використовувати відсотки. Вони обчислюються відносно розмірів самого елемента:
.element {
transform: translateX(100%);
}У цьому прикладі елемент переміститься праворуч на власну ширину.
Функція scale() змінює розмір елемента.
.element {
transform: scale(1.5);
}Значення 1 зберігає початковий розмір:
.element {
transform: scale(1);
}Значення більше за 1 збільшує елемент, а значення від 0 до 1 зменшує його:
.element {
transform: scale(0.75);
}Можна окремо вказати масштаб по горизонталі та вертикалі:
.element {
transform: scale(1.5, 0.8);
}1.5 — елемент стає ширшим;
0.8 — елемент стає нижчим.
Для окремої осі використовують scaleX() і scaleY():
.element {
transform: scaleX(1.2);
}.element {
transform: scaleY(0.9);
}Від’ємне значення масштабу віддзеркалює елемент:
.element {
transform: scaleX(-1);
}Для обертання використовують функцію rotate().
.element {
transform: rotate(45deg);
}Значення задають у кутових одиницях, найчастіше — у градусах deg.
додатне значення обертає елемент за годинниковою стрілкою;
від’ємне значення — проти годинникової стрілки.
.element {
transform: rotate(-20deg);
}Повний оберт можна записати так:
.element {
transform: rotate(360deg);
}Окрім градусів, можна використовувати одиницю turn:
.element {
transform: rotate(0.25turn);
}0.25turn дорівнює чверті повного оберту, тобто 90deg.
Для нахилу елемента використовують skew().
.element {
transform: skew(20deg, 10deg);
}Перше значення відповідає за нахил по горизонтальній осі, друге — по вертикальній.
Для нахилу лише по одній осі використовують:
.element {
transform: skewX(20deg);
}.element {
transform: skewY(-10deg);
}Нахил часто використовують для декоративних блоків, кнопок або створення ефекту перспективного руху.
Кілька трансформацій записують в одному значенні transform, розділяючи їх пробілами:
.card {
transform: translateY(-10px) scale(1.05) rotate(2deg);
}Функції застосовуються в указаному порядку. Наприклад, ці записи можуть дати різний результат:
.first {
transform: translateX(50px) rotate(20deg);
}
.second {
transform: rotate(20deg) translateX(50px);
}У першому випадку елемент спочатку переміщується, а потім обертається. У другому — спочатку обертається, а потім переміщується вже в системі координат після обертання.
Не варто записувати transform кілька разів у різних правилах, очікуючи, що значення об’єднаються:
/* Застосуємо лише rotate(10deg) */
.element {
transform: translateX(20px);
transform: rotate(10deg);
}Друге значення перезаписує перше. Якщо потрібні обидві трансформації, їх слід записати разом:
.element {
transform: translateX(20px) rotate(10deg);
}За замовчуванням трансформація відбувається відносно центра елемента. Змінити цю точку можна за допомогою transform-origin.
.element {
transform-origin: left top;
transform: rotate(20deg);
}Поширені значення:
center — центр;
top, right, bottom, left — відповідний край;
комбінації на кшталт left top;
довільні значення, наприклад 20px 80%.
Приклад масштабування від лівого верхнього кута:
.element {
transform-origin: left top;
transform: scale(1.2);
}Якщо transform-origin не задано, використовується значення center center.
У прикладі картка збільшується, трохи піднімається та повертається під час наведення курсору.
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Трансформації елементів</title>
<style>
* {
box-sizing: border-box;
}
body {
min-height: 100vh;
margin: 0;
display: grid;
place-items: center;
background: #f1f5f9;
font-family: Arial, sans-serif;
}
.card {
width: 260px;
padding: 24px;
border-radius: 16px;
background: #ffffff;
box-shadow: 0 10px 25px rgb(15 23 42 / 15%);
transform-origin: center;
transition: transform 250ms ease;
}
.card:hover {
transform: translateY(-12px) rotate(2deg) scale(1.04);
}
.card__icon {
width: 56px;
height: 56px;
display: grid;
place-items: center;
margin-bottom: 16px;
border-radius: 12px;
background: #dbeafe;
color: #2563eb;
font-size: 28px;
transform: rotate(-8deg);
}
.card__title {
margin: 0 0 8px;
color: #0f172a;
font-size: 22px;
}
.card__text {
margin: 0;
color: #475569;
line-height: 1.5;
}
</style>
</head>
<body>
<article class="card">
<div class="card__icon">★</div>
<h1 class="card__title">Трансформації</h1>
<p class="card__text">
Наведіть курсор на картку, щоб побачити переміщення,
масштабування та обертання.
</p>
</article>
</body>
</html>У цьому прикладі:
translateY(-12px) піднімає картку;
rotate(2deg) трохи її повертає;
scale(1.04) збільшує картку на 4%;
transform-origin: center залишає точку трансформації в центрі;
transition робить зміну стану плавною.
Важливо, що transform змінює вигляд картки, але не переміщує інші елементи сторінки.
Неправильно:
.element {
transform: translateX(20px);
transform: scale(1.2);
}Правильно:
.element {
transform: translateX(20px) scale(1.2);
}Трансформація не резервує нове місце в потоці документа. Якщо елемент збільшився або перемістився, сусідні елементи не змістяться автоматично.
Якщо потрібно змінити реальне місце елемента в розмітці, для цього використовують властивості макета, наприклад margin, padding, width або height, а не transform.
scale() і розмірамиscale(2) візуально збільшує елемент удвічі, але не змінює його CSS-значення width і height. Обчислення розміру елемента в макеті продовжує ґрунтуватися на початкових значеннях.
Порядок трансформацій впливає на результат. Якщо переміщення та обертання мають працювати передбачувано, перевіряйте порядок функцій експериментально та записуйте його явно.
Якщо елемент обертається навколо неочікуваної точки, перевірте transform-origin:
.element {
transform-origin: left center;
transform: rotate(15deg);
}transform змінює візуальне представлення елемента.
translate() переміщує елемент.
scale() змінює його масштаб.
rotate() обертає елемент.
skew() нахиляє елемент.
Для окремих осей існують функції translateX(), translateY(), scaleX(), scaleY(), skewX() і skewY().
Кілька трансформацій записують в одному значенні transform.
Порядок трансформацій має значення.
transform-origin визначає точку, відносно якої виконується трансформація.
Трансформації не змінюють місце елемента у звичайному потоці документа.