Например, когда<div> тень от коробки, а также ее вращение вызовут поворот направления тени от коробки, что проблематично, когда тень от коробки должна создавать иллюзию освещения.

Пример:https://jsfiddle.net/5h7z4swk/

div {
  width: 50px;
  height: 50px;
  margin: 20px;
  box-shadow: 10px 10px 10px #000;
  display: inline-block;
}
#box1 {
  background-color: #b00;
}
#box2 {
  background-color: #0b0;
  transform: rotate(30deg);
}
#box3 {
  background-color: #00b;
  transform: rotate(60deg);
}
#box4 {
  background-color: #b0b;
  transform: rotate(90deg);
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
#box6 {
  background-color: #0bb;
  animation-name: spin;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
<div id="box6"></div>

Ответ на эту проблему должен выглядеть примерно так:

Как я могу повернуть<div> и все еще держите тень от коробки в том же направлении?

Решение должно быть чисто CSS ...

Примечание. Анимация в CSS предназначена для демонстрационных целей. Вариант использования будет использовать JavaScript для установки поворота. Но JavaScript ничего не будет знать о box-shadow, так как дизайн отвечает за (или много ...) теней. Вот почему это должно быть чисто решение CSS.