Behalten Sie die Box-Schatten-Richtung bei, während Sie sich drehen

Wenn Sie z. ein<div> ein kastenschatten sowie eine drehung bewirken eine drehung der kastenschattenrichtung - was problematisch ist, wenn der kastenschatten eine illusion von beleuchtung erzeugen soll.

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

Die Antwort auf dieses Problem sollte ungefähr so aussehen:

Wie kann ich ein @ drehe<div> und immer noch den Kastenschatten in die gleiche Richtung bewegen?

Die Lösung sollte reines CSS sein ...

Hinweis: Die Animation im CSS dient zu Demonstrationszwecken. Der Anwendungsfall verwendet JavaScript, um die Drehung festzulegen. Das JavaScript weiß jedoch nichts über den Kastenschatten, da es in der Verantwortung des Entwurfs liegt, einen (oder mehrere ...) Schatten zu definieren. Deshalb sollte es eine reine CSS-Lösung sein.