Как сохранить постоянное направление тени при вращении предмета?

#html #css #html5 #css3 #css_animation

Например у div есть прямоугольная тень. При вращении прямоугольника происходит вращение
направления прямоугольной тени, что вызывает проблемы, так как тень прямоугольника
должна создать иллюзию освещения.      

Пример:  jsfiddle      



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 и сохранить прямоугольную тень от него в том же направлении?
Решение должно быть только -- CSS...    

Перевод вопроса : Keep box-shadow direction consistent while rotating @Chris
    

Ответы

Ответ 1

Размеры квадрата и его положение зададим родительскому блоку, а псевдоэлементы пусть
их наследуют. «Блок-тень» немного сдвинем, добавим ему размытие (имитация тени) и будем
вращать псевдоэлементы.



body {
  background-color: #8694ef;
}

.square {
  width: 100px;
  height: 100px;
  position: relative;
  top: 50px;
  left: 100px;
}

.square:before,
.square:after {
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  top: 20px;
  left: 20px;
  background-color: rgba(0,0,0,0.6);
  filter: blur(8px);
  animation: rotate linear 5s infinite;
}

.square:after {
  top: 0;
  left: 0;
  filter: none;
  background-color: #ccc;
}

@keyframes rotate {
  to {
    transform: rotate(1turn);
  }
}



Ответ 2

Сохранение  направления смещения прямоугольника-тени, согласованного во время вращения,
реализуется с помощью CSS-transforms.     

Этот подход основан на том, что фактически transform origin перемещается с помощью
преобразований.    

Это означает, что когда несколько преобразований установлены на один и тот же элемент,
система координат каждого преобразования изменяется в соответствии с предыдущими.    

В следующем примере синий элемент является псевдоэлементом, а тень - элементом 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); }
}





Объяснение свойства transition для псевдоэлемента
 (см. Следующий фрагмент кода для иллюстрации этапов):     

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



rotate(-360deg) - Счетчик вращение родительского элемента, чтобы
сделать псевдоэлемент статическим   
translate (-10px, -10px) - псевдоэлемент сдвигается, чтобы сделать
смещение тени   
rotate(360deg), псевдоэлемент поворачивается в том же направлении,
что и родительский элемент    


Чтобы увидеть все элементы откройте сниппет "на всю страницу"   



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

  
Counter rotate:

  
Translate :

  
Rotate:




    

Перевод ответа: Keep box-shadow direction consistent while rotating @web-tiki


Ответ 3

Вы также можете интегрировать направление прямоугольной тени внутри кадров анимации:    



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









Перевод ответа: Keep box-shadow direction consistent while rotating@GCyrillus