CSS如何为带旋转动画的盒子设置角度固定不跟随旋转的box-shadow

问题核心原因 #

box-shadow 是元素自身的属性，会跟随元素的变换（transform）同步改变坐标系，因此元素做旋转动画时，阴影也会跟着转动。 #

方案1：拆分DOM结构（兼容性最好） #

把阴影绑定在不旋转的外层容器上，旋转动画只作用于内部带背景的元素，不需要修改原有动画逻辑，修改后的完整代码如下：

<!DOCTYPE html>
<html>
 <head>
 <title>Page Title</title>
 <style>
  body{
   display:flex;}
  .boxes{
    width:100px;
    height:100px;
    border-radius: 50%;
    /* 阴影移到外层容器 */
    box-shadow: -15px 15px 15px 2px #111111;
    margin:0 2rem;
}
  .box-inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(45deg, rgba(2,0,36,1) 6%, rgba(9,9,121,1) 10%, rgba(0,212,255,1) 100%);
  }
  #box2 .box-inner{
    animation: rot 4s alternate infinite -.5s ease-in-out;
  }
  @keyframes rot {
    from {
        transform: rotate(45deg);
    }
    to {
        transform:rotate(-45deg);
    }
  }
 </style>
</head>
<body>
  <div id="box1" class="boxes">
    <div class="box-inner"></div>
  </div>
  <div id="box2" class="boxes">
    <div class="box-inner"></div>
  </div>
</body>
</html>

方案2：使用drop-shadow滤镜（无需改DOM） #

如果你不想修改原有DOM结构，可以把阴影用filter: drop-shadow()属性加在旋转元素的父级（本例直接加在body上即可），父级不执行旋转的话，阴影角度就会固定，修改后的核心样式如下：

body{
  display:flex;
  /* 把阴影通过drop-shadow加在父级 */
  filter: drop-shadow(-15px 15px 15px #111111);
}
.boxes{
  width:100px;
  height:100px;
  border-radius: 50%;
  /* 去掉原来的box-shadow */
  background: linear-gradient(45deg, rgba(2,0,36,1) 6%, rgba(9,9,121,1) 10%, rgba(0,212,255,1) 100%);
  margin:0 2rem;
}
#box2{
  animation: rot 4s alternate infinite -.5s ease-in-out;
}
@keyframes rot {
  from {
      transform: rotate(45deg);
  }
  to {
      transform:rotate(-45deg);
  }
}

注意：drop-shadow不支持第四个扩展半径参数，所以和原有box-shadow的效果会有细微差异，如果需要完全匹配原阴影效果优先选方案1。

内容的提问来源于stack exchange，提问作者Abdolali-Ahmadi