Ao dar p. Ex. uma<div> uma sombra de caixa e sua rotação causam uma rotação da direção da sombra de caixa - o que é problemático quando a sombra de caixa deve criar uma ilusão de iluminação.

Exemplo: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>

A resposta para esse problema deve ser semelhante a esta simulação:

Como posso girar um<div> e ainda manter a sombra da caixa indo na mesma direção?

A solução deve ser CSS puro ...

Nota: A animação no CSS é para fins de demonstração. O caso de uso usará JavaScript para definir a rotação. Mas o JavaScript não saberá nada sobre a sombra de caixa, pois é de responsabilidade do design definir uma (ou muitas ...) sombras. É por isso que deve ser uma solução CSS pura.