transform-origin: точка отсчёта преобразования
transform-origin задаёт опорную точку, относительно которой выполняются преобразования элемента.
Назначение
transform-origin задаёт опорную точку, относительно которой выполняются преобразования элемента.
Как это работает
Для поворота разные опорные точки дают разные траектории краёв. Два значения описывают горизонтальное и вертикальное положение; исходная коробка в обычном потоке при transform не перестраивается.
Пример
<style>
.card{display:inline-block;padding:20px;margin:30px;background:#d5e9de;transform:rotate(8deg);transform-origin:left top}
</style>
<div class="card">Поворот от верхнего левого угла</div>Что должно получиться
Карточка повернута вокруг своего верхнего левого угла. Отступы в примере оставляют визуальное пространство, но не являются автоматическим расчётом новой границы после поворота.
Граница применения и частая ошибка
Не рассчитывайте, что соседние элементы автоматически освободят место для повёрнутой карточки. Видимый результат может перекрыть текст или обрезаться предком.
Самостоятельная проверка
Сравните поворот от center и left top. Добавьте соседний блок и убедитесь, что его положение не изменилось вместе с визуальной рамкой преобразованного элемента.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Для проверки сетевых запросов, отправки данных или функций браузера используйте отдельную локальную страницу.