Урок 43. Старый vs Новый: Трансформации: transform, 2D/3D

📁 Раздел: Организация CSS ⏱️ Время изучения: ~75 мин 🎯 Сложность: Средняя
#transform #translate #rotate #scale #perspective #rotatex #transform-origin

⚡ Кратко

Раньше сдвиг и подъём блока делали через position и top/left — это пересчитывает раскладку и тормозит. Сегодня то же делает transform: translate() — дёшево, на GPU, без влияния на поток.

Старый подход: position + top/left

Чтобы «приподнять» карточку на hover, двигали её через top/left у позиционированного элемента. Браузер на каждый кадр заново считает layout, анимация дёргается, а соседние блоки могут реагировать на смену позиции. Так двигать элемент дорого.

📄 lesson-43/old.css
.card {
  position: relative;
  top: 0;
  left: 0;
  transition: top 180ms ease, left 180ms ease;
}
.card:hover {
  top: -8px;   /* пересчёт раскладки каждый кадр */
  left: 4px;
}
сдвинут через top/left
.card { position: relative; top: -8px; left: 4px; }

Современный подход: transform

Тот же визуальный сдвиг даёт transform: translate(). Он рисуется на GPU, не трогает раскладку и не влияет на соседей — поэтому переходы плавные. Это рекомендуемый способ двигать и масштабировать элементы.

📄 lesson-43/modern.css
.card {
  transform: translate(0, 0);
  transition: transform 180ms ease;  /* дёшево, на GPU */
}
.card:hover {
  transform: translate(4px, -8px);
}
сдвинут через transform
.card { transform: translate(4px, -8px); }
Связь с уроком 42: анимировать стоит именно transform и opacity — это «дешёвые» свойства, которые браузер обрабатывает без перерасчёта layout.

Навигация