Урок 43. Ошибки: Трансформации: transform, 2D/3D

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

⚡ Кратко

Топ-ошибки с transform: ждать сдвига соседей, забыть perspective у родителя, перепутать transform-origin и записать несколько transform отдельными строками (последний перезатирает предыдущие).

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

1. Ждать, что соседи сдвинутся

transform не влияет на поток: элемент рисуется в новом месте, но его исходное место остаётся занятым. Если нужно реально подвинуть соседние блоки — используй margin или меняй раскладку.

2. Несколько transform = последний побеждает

Свойство transform одно. Две строки transform не складываются — вторая перезаписывает первую. Все функции перечисляй в одном объявлении через пробел.

📄 неправильно
.box {
  transform: rotate(10deg);
  transform: scale(1.2);  /* затирает rotate — поворота не будет */
}
📄 правильно
.box {
  transform: rotate(10deg) scale(1.2);  /* обе операции вместе */
}
только scale
две строки → поворот потерян
rotate + scale
одна строка → всё работает 
/* плохо */  transform: rotate(10deg); transform: scale(1.2);
/* хорошо */ transform: rotate(10deg) scale(1.2);

3. 3D-поворот без perspective

rotateY() без perspective на родителе выглядит как плоское сжатие — нет ощущения глубины. Перспективу задают контейнеру: perspective: 800px.

4. Неучтённый transform-origin

Поворот «уезжает» не туда, потому что по умолчанию опора — центр. Если ждёшь поворот вокруг угла — задай transform-origin: top left явно.

Навигация