Свойство transform: визуальные преобразования
Как сдвигать, масштабировать и поворачивать элемент без перестройки обычного потока.
Как это работает
transform меняет визуальное представление элемента: сдвигает, поворачивает или масштабирует. Соседние элементы обычно сохраняют места, рассчитанные до преобразования. Поэтому увеличенный блок может перекрыть их, хотя раскладка формально не изменилась.
Порядок функций важен: поворот с последующим сдвигом отличается от обратной последовательности. Точка преобразования задаётся transform-origin. Ненулевое преобразование также создаёт контекст наложения, что важно при отладке всплывающих элементов.
Пример в интерфейсе
.box { display: inline-block; margin: 20px; padding: 20px; background: #eaf4ee; transform: rotate(-3deg); }Значения и поведение
| Значение или правило | Результат |
|---|---|
| translate(…) | Визуальный сдвиг. |
| scale(…) | Масштабирование. |
| rotate(…) | Поворот на угол. |
| transform-origin | Точка, относительно которой происходит преобразование. |
На что обратить внимание
Проверьте на практике
Добавьте второй соседний блок и увеличьте scale до 1.2. Посмотрите, почему для преобразования нужно заранее оставить свободное место.
Связанные темы: transition, z-index.