Как повернуть элемент

Короткий ответ

Свойство rotate поворачивает элемент на заданный угол:

<div style="display: flex; gap: 24px; padding: 20px;">
  <div style="width: 60px; height: 60px; background: gold; rotate: 15deg;"></div>
  <div style="width: 60px; height: 60px; background: tomato; rotate: -45deg;"></div>
</div>

Положительный угол — по часовой стрелке. Можно писать deg (градусы) или turn (обороты): 0.5turn — это 180 градусов.

Точка вращения

По умолчанию элемент вращается вокруг центра. transform-origin переносит ось — например, в левый верхний угол:

<div style="padding: 10px 40px;">
  <div style="width: 80px; height: 40px; background: lightseagreen; rotate: 20deg; transform-origin: top left;"></div>
</div>

Поворот при наведении

Стрелка, которая разворачивается при наведении:

<style>
  .more { display: inline-flex; gap: 6px; cursor: pointer; }
  .more span { display: inline-block; transition: rotate 0.3s; }
  .more:hover span { rotate: 180deg; }
</style>
 
<div class="more">Show more <span>▼</span></div>

Частая ошибка

Поворот не работает у строчного элемента, например у span внутри текста: трансформации применяются только к блочным и строчно-блочным элементам. Добавьте display: inline-block, как в последнем примере. И помните, что повёрнутый элемент не сдвигает соседей — он может налезть на них.