При подаче, например, a <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>