html - 旋转时保持盒子阴影方向一致

Question

当给例如一个<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>

这个问题的答案应该类似于这个模型:

如何旋转 <div>并且仍然保持 box-shadow 向同一个方向移动？

解决方案应该是纯 CSS...

注意:CSS 中的动画用于演示目的。该用例将使用 JavaScript 来设置旋转。但是 JavaScript 对盒子阴影一无所知，因为设计有责任定义一个(或多个……)阴影。这就是为什么它应该是一个纯 CSS 解决方案。

Answer 1

在旋转期间保持偏移框阴影的方向一致使用 CSS 转换很简单。
这种方法依赖于 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); }
}

<div></div>

伪元素的过渡属性说明(请参阅以下代码片段以了解步骤说明):

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

1. rotate(-360deg) 对抗父元素的旋转以使伪元素静态。
2. translate(-10px, -10px) 伪元素平移使阴影偏移
3. 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); }
}

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