img - html title attribute style

Mantenga la dirección de la sombra de la caja constante mientras gira

Question

Al dar, por ejemplo, una <div> una sombra de cuadro, así como su rotación, se producirá una rotación de la dirección de la sombra de caja, lo cual es problemático cuando la sombra de caja debe 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 seguir manteniendo la sombra de la caja en la misma dirección?

La solución debe ser pura CSS ...

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 sobre 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.

Answer 1

Inspirado por las otras respuestas, también creé mi propia respuesta: https://jsfiddle.net/zoxgbcrg/1/

.shadow {
  background-color: black !important;
  width: 40px;
  height: 40px;
  box-shadow: 0px 0px 10px 5px #000;
  margin-top: 35px;
  margin-left: 35px;
  position: absolute;
  z-index: -1;
}

<div class="box1 shadow"></div><div class="box1"></div>

El truco también es crear un <div> adicional para manejar la sombra. En mi caso no es un :before sino un elemento DOM real que se mueve por margin .

Nota: parece que a partir de hoy (31.01.2016) Firefox y Chrome tienen una diferencia de representación sutil. Entonces, para Firefox https://jsfiddle.net/zoxgbcrg/ está creando el resultado deseado, para Chrome sugiero https://jsfiddle.net/zoxgbcrg/1/

Answer 2

También podría integrar la dirección de la sombra de la caja dentro de los cuadros de animación:

div {
  display: inline-block;
  margin: 1em ;
  height: 50px;
  width: 50px;
  box-shadow: 15px 15px 15px 5px gray;
  animation: rte 5s infinite linear;
}

.red {
  background: red
}

.green {
  background: green;
  animation-delay:2s;
}

.blue {
  background: blue;
  animation-delay:4s;
}

.bob {
  background: #b0b;
  animation-delay:6s;
}

.cyan {
  background: cyan;
  animation-delay:8s;
}

@keyframes rte {
  25% {
    box-shadow:  15px -15px 15px 5px gray;
  }
  50% {
      box-shadow:  -15px -15px 15px 5px gray;
  }
  75% {
    box-shadow:  -15px 15px 15px 5px gray;
  }
  100% {
    transform: rotate(360deg);
  }
}

<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
<div class="bob"></div>
<div class="cyan"></div>

Answer 3

Mantener la dirección de una sombra de cuadro de compensación constante durante la rotación es simple con las transformaciones CSS.
Este enfoque se basa en el hecho de que el origen de la transformación se mueve con las transformaciones. Esto significa que cuando se establecen varias transformaciones en el mismo elemento, el sistema de coordenadas de cada transformación cambia de acuerdo con los anteriores.

En el siguiente ejemplo, el elemento azul es un pseudo elemento y la sombra es el elemento div:

div {
  width: 40px; height: 40px;
  margin: 40px;
  box-shadow: 0px 0px 10px 5px #000;
  animation: spinShadow 2s infinite;
  background-color: #000;
}
@keyframes spinShadow {
  to { transform: rotate(360deg); }
}
div:before {
  content: '''';
  position: absolute;
  left:-5px; top:-5px;
  width: 50px; height: 50px;
  transform: rotate(0deg) translate(-10px, -10px) rotate(0deg);
  animation:inherit;
  animation-name: spinElt;
  background-color: #0bb;
}
@keyframes spinElt {
  to { transform: rotate(-360deg) translate(-10px, -10px) rotate(360deg); }
}

<div></div>

Explicación de la propiedad de transición en el pseudo elemento ( consulte el siguiente fragmento de código para ver una ilustración de los pasos ):

transform: rotate(-360deg) translate(-10px, -10px) rotate(360deg)

1. rotate(-360deg) contrarresta la rotación del padre para hacer que el pseudoelemento sea estático.
2. translate(-10px, -10px) el pseudo elemento se traduce para hacer el desplazamiento de la sombra
3. rotate(360deg) el pseudo elemento se gira en la misma dirección que el padre

div {
  width: 40px; height: 40px;
  margin: 40px;
  box-shadow: 0px 0px 10px 5px #000;
  animation: spinShadow 2s infinite;
  background-color: #000;
}
@keyframes spinShadow {
  to { transform: rotate(360deg); }
}
div:before {
  content: '''';
  position: absolute;
  left:-5px; top:-5px;
  width: 50px; height: 50px;
  animation:inherit;
  background-color: #0bb;
}
#first:before{
  transform: rotate(0deg);
  animation-name: first;
}  
@keyframes first {
  to { transform: rotate(-360deg); }
}
#second:before{
  transform: rotate(0deg) translate(-10px, -10px);
  animation-name: second;
}  
@keyframes second {
  to { transform: rotate(-360deg) translate(-10px, -10px); }
}
#complete:before{
  transform: rotate(0deg) translate(-10px, -10px) rotate(0deg);
  animation-name: complete;
}  
@keyframes complete {
  to { transform: rotate(-360deg) translate(-10px, -10px) rotate(360deg); }
}

<ol>
  <li>Counter rotate:<div id="first"></div></li>
  <li>Translate :<div id="second"></div></li>
  <li>Rotate:<div id="complete"></div></li>
<ol>