Mantenha a direção da sombra da caixa consistente ao girar
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.