CSS rotation and box-shadow

How can the shadow direction be kept?

HTML

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

CSS

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;
}