Поворот div элемента на 90 градусов с CSS и JavaScript

Быстрый ответ

Если вам необходимо быстро повернуть элемент <div>, используйте CSS-свойство transform: rotate(90deg);:

<div style="transform: rotate(90deg);">Повёрнутый на 90°</div>

Таким образом, элемент будет повернут по часовой стрелке на 90° одной командой.

Для добления плавности процессу вращения, используйте следующий код:

div {
  transition: transform 0.5s ease-in-out;
}

С помощью этого кода, для вашего элемента div будет создан эффект плавного вращения.

Пошаговое руководство

Использование CSS transform

Для поворота элемента воспользуйтесь функцией transform: rotate(90deg);. Вот пример кода, с помощью которого можно повернуть <div>, не используя интерактивных состояний вроде :hover:

#rotate-me {
  transform: rotate(90deg);
}

Подробнее об этом расскажет наш спикер на видео

Настройка стилей после поворота

После вращения элемента возможно нужно будет скорректировать некоторые стилевые свойства, например, ширину, высоту и границы:

#make-over {
  width: 100px;
  height: 200px;
  border: 1px solid black;
  transform-origin: top left;
}

Возможности свойства transform

CSS-свойство transform предоставляет множество возможностей: не только вращение, но и масштабирование, перетаскивание и искажение. Взглянем на пример:

#do-the-wave {
  transform: skew(20deg) scale(1.2);
}

Вращение при наведении

Чтобы создать эффект вращения при наведении курсора, используйте псевдокласс :hover:

#hovercraft {
  transition: transform 0.5s;
}
#hovercraft:hover {
  transform: rotate(90deg);
}

Вендорные префиксы в ретроспективе

В прошлом, чтобы обеспечить совместимость с различными браузерами, приходилось использовать так называемые вендорные префиксы, например, -webkit- или -ms-. Сегодня синтаксис transform поддерживается большинством современных браузеров без использования дополнительных префиксов. Однако, всегда стоит проверять поддержку свойств для тех случаев, где они все же могут потребоваться.

Визуализация

Вообразим дверь (🚪), которая открывается с севера на юг:

🧭 Текущее положение: 
[ 🚪 ] 
  🧍‍♀️

Применяя CSS-трансформацию, мы можем заставить дверь открываться с запада на восток:

div {
  transform: rotate(90deg);
}

🧭 Новое положение: 
🧍‍♀️ [ 🚪 ]

Теперь дверь поворачивается на 90 градусов вправо. Если бы все домашние ремонты были такими же простыми!

Опыт улучшает качество

Комбинирование трансформаций для создания сложных эффектов

С использованием transform можно комбинировать вращение, масштабирование и другие эффекты для создания более сложных анимаций:

div {
  transform: rotate(90deg) scale(1.5);
}

Коррекция стилей после поворота

Не забывайте, что после вращения элементы могут требовать коррекции положения из-за изменения их размеров. В этом случае может быть полезно использование свойства position.

Доступность имеет первостепенное значение перед эстетикой

Несмотря на то, что анимации могут оживить ваш сайт, важно убедиться, что они не мешают пользовательскому опыту, особенно для людей, которые используют скринридеры, и не вызывают дискомфорта у пользователей, страдающих от повышенной чувствительности к движениям. Главное здесь – находить баланс между красотой и функциональностью.

Полезные материалы

1. transform – CSS: Cascading Style Sheets | MDN – В этом подробном руководстве разбирается работа с свойством CSS transform.
2. Свойство CSS transform | W3Schools – Здесь шаг за шагом разъясняются основы и примеры использования свойства transform.
3. CSS Flip Animation | Дэвид Уолш Блог – В статье объясняется, как создавать анимацию переворота с использованием CSS.
4. Can I use... Support tables for HTML5, CSS3, etc – Этот сайт поможет проверить поддержку функции 2D трансформации в различных браузерах.