Загрузка...

Трансформации в CSS

Переходы задают длительность изменения. Transform задаёт куда смещаются пиксели: сдвинуть chip, повернуть иконку загрузки, увеличить badge при hover — обычно без сдвига соседей, как при margin или top.

Что меняет transform

transform накладывает 2D-отображение (позже 3D) на отрисованную box. Место в потоке часто остаётся прежним. translate() удобен для микродвижений: hover, открыто/закрыто, мелкие правки.

Одно свойство, несколько функций — не списки через запятую в одном transform; цепочка через пробелы: transform: translateX(1rem) rotate(8deg) scale(1.05);

Основные 2D-функции

📊 2D transform — кратко

Функция	Типичная задача
`translate(x, y)` / `translateX` / `translateY`	Визуальный сдвиг без reflow
`rotate(угол)`	Поворот иконок и стрелок (`deg`, `turn`)
`scale(x, y)` / `scale(n)`	Акцент при hover — умеренные значения
`skew(x, y)`	Редкий наклон — малые углы

Углы в deg или turn. Проценты в translate() — от собственного размера элемента.

Сначала translate

Для визуального толчка выбирайте translate раньше top/margin. С transition из прошлого урока движение часто плавнее.

Chip nudge on hover

css

.chip {
display: inline-block;
padding: 0.35rem 0.75rem;
border-radius: 999px;
background: #e0e7ff;
color: #1e3a8a;
transition: transform 0.2s ease, background-color 0.2s ease;
}

.chip:hover,
.chip:focus-visible {
transform: translateY(-0.15rem);
background: #c7d2fe;
}

Chip поднимается визуально; строковая box на месте. С отрицательным margin-top соседи прыгают.

rotate и scale вместе

Badge и иконки часто сочетают небольшой scale и rotate. Узкие углы выглядят профессионально.

Badge pop and chevron spin

css

.badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.875rem;
transition: transform 0.25s ease;
}

.badge:hover {
transform: scale(1.06);
}

.chevron {
display: inline-block;
transition: transform 0.2s ease;
}

.menu-open .chevron {
transform: rotate(180deg);
}

scale(1.06) — акцент; scale(2) — ошибка. rotate(180deg) — «открыто», через класс.

transform-origin — ось

По умолчанию pivot в центре. transform-origin смещает его — низ-слева как дверь, 50% 100% для вкладок.

Hinge from bottom edge with transition

css

.panel-tilt {
transform-origin: 50% 100%;
transition: transform 0.35s ease;
}

.panel-tilt.is-open {
transform: rotateX(12deg);
}

Лёгкий rotateX для словаря. Полный 3D — в optional 3D Transforms; здесь важен origin.

С transition; без layout

transition на базовом правиле; анимируйте transform (и opacity). Учитывайте prefers-reduced-motion: reduce.

Попробуйте

Поднимите кнопку translateY(-0.2rem) — сравните с margin-top.
Поверните chevron на 180deg при .is-open.
transform-origin: left center и небольшой rotate.
Цепочка translateX(0.5rem) scale(1.04) в одном transform.
Эмулируйте reduced motion.

Частые ошибки

top/margin вместо translate для lift
Большой rotate на обёртках
Забытый transform-origin
scale(0) без плана a11y
Тяжёлый 3D без нужды

Итог

transform двигает отрисованную box; поток обычно тот же
Функции в одном transform
transform-origin = pivot
Сочетайте с transition
Далее: CSS Animations (@keyframes)

🧠 Проверьте Свои Знания

Готов к Началу

Проверьте Свои Знания

Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему

❓

Вопросы

🎯

70%

Для Прохождения

♾️

∞

Время

🔄

∞

Попытки

📝 Инструкции

Внимательно прочитайте каждый вопрос
Выберите лучший ответ на каждый вопрос
Вы можете пересдавать тест столько раз, сколько захотите
Ваш прогресс будет показан вверху

Язык