Как div повернуть на 45 градусов?

Повернуть div на 45° можно свойством `transform: rotate()` или отдельным свойством `rotate`.

.box {
  transform: rotate(45deg);
}

/* или новое отдельное свойство */
.box {
  rotate: 45deg;
}

Особенности

• Поворот идёт вокруг центра; точку можно сменить: transform-origin: top left.
• Поворот не меняет место элемента в потоке — соседи не сдвигаются, повернутый блок может наложиться на них.
• Отрицательное значение — против часовой стрелки: rotate(-45deg).
• Отдельное свойство rotate удобно комбинировать с translate и scale без перезаписи transform.

Анимация

.icon { transition: rotate .3s; }
.open .icon { rotate: 180deg; }

transform и rotate анимируются без пересчёта раскладки — плавно.

Коротко для собеседования

transform: rotate(45deg) или rotate: 45deg; центр поворота задаёт transform-origin, место в потоке не меняется.

Подробнее: MDN — rotate()