Al dar p. una<div> una sombra de caja, así como su rotación, provocará una rotación de la dirección de la sombra de caja, lo cual es problemático cuando la sombra de caja debería crear una ilusión de iluminación.

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

La respuesta a este problema debería ser similar a esta maqueta:

¿Cómo puedo rotar un<div> y todavía mantener la sombra de la caja yendo en la misma dirección?

La solución debe ser CSS puro ...

Nota: La animación en el CSS es para fines de demostración. El caso de uso utilizará JavaScript para establecer la rotación. Pero el JavaScript no sabrá nada acerca de la sombra de la caja, ya que es responsabilidad del diseño definir una (o muchas ...) sombras. Es por eso que debería ser una solución CSS pura.