Как сделать div с изображениями ровно под наклоном

Часто при создании галерей или декоративных блоков перед веб-разработчиками встаёт задача: расположить несколько изображений в контейнере под углом, но так, чтобы они оставались ровно друг под другом. Простое применение CSS rotate к каждому элементу может нарушить общую структуру, и картинки «разъезжаются». Разберём правильный подход с использованием Flexbox и трансформаций.

Проблема при использовании rotate без подготовки

Когда вы задаёте transform: rotate(5deg) каждому внутри div с display: flex и align-items: center, ось вращения по умолчанию проходит через центр элемента. Из-за этого нижние края изображений смещаются, и они перестают быть ровно друг под другом. Чтобы этого избежать, нужно управлять точкой трансформации.

Решение: свойство transform-origin

Ключевой приём - установить transform-origin: left center (или другое значение в зависимости от нужного наклона) для каждого изображения. Это заставит элемент вращаться вокруг левого края, сохраняя вертикальное выравнивание. Дополнительно используйте display: flex и flex-direction: column на родителе, чтобы картинки шли строго друг за другом.

Пошаговая инструкция с примерами кода

Шаг 1: HTML-структура

<div class="gallery">
  <img src="photo1.jpg" alt="Фото 1">
  <img src="photo2.jpg" alt="Фото 2">
  <img src="photo3.jpg" alt="Фото 3">
</div>

Шаг 2: CSS для родительского контейнера

.gallery {
  display: flex;
  flex-direction: column;  /* изображения друг под другом */
  align-items: center;     /* центрирование по горизонтали */
  gap: 20px;               /* отступы между картинками */
}

Шаг 3: Наклон каждого изображения

.gallery img {
  transform: rotate(-5deg);   /* угол наклона */
  transform-origin: left center; /* вращение вокруг левого края */
  max-width: 100%;
  height: auto;
}

Теперь все картинки будут наклонены одинаково, но при этом останутся ровно друг под другом. Если нужно изменить направление наклона, просто поменяйте знак угла или задайте transform-origin: right center.

Дополнительные советы для идеального результата

• Используйте отрицательный margin для тонкой подстройки положения, если после трансформации появляется небольшое смещение.
• Добавьте box-shadow к изображениям, чтобы создать эффект «падающих» фотографий - это визуально усилит наклон.
• Проверяйте в разных браузерах: свойство transform-origin поддерживается всеми современными браузерами, но для старых версий может потребоваться префикс -webkit-.

Часто задаваемые вопросы

Почему align-items: center не работает с rotate?

По умолчанию rotate применяется относительно центра элемента. После поворота геометрические границы (bounding box) меняются, и браузер выравнивает именно их, а не видимую область. transform-origin исправляет это поведение.

Можно ли сделать наклон в другую сторону?

Да, достаточно изменить знак угла, например rotate(5deg) вместо rotate(-5deg), или поменять точку вращения на right center.

Как добавить анимацию при наведении?

Используйте transition: transform 0.3s ease на изображениях, а в :hover меняйте угол наклона, например transform: rotate(0deg).