转换后应用过滤器

Question

我有一张交叉线的透明 .png 图片。如果应用 drop-shadow CSS filter，则只有线条会投影，而不是边界矩形（它与 box-shadow 不同）。

当我同时应用 drop-shadow 滤镜和 transform: rotate 时，Chrome 和 FF 首先绘制阴影，然后旋转生成的图像（与阴影合并）。我希望旋转后的图像投下阴影。（好像有一个静止的光源，当图像旋转时）。

纯CSS可以吗？

我看到的唯一解决方案是每次图像旋转时JS三角计算阴影参数

此致，

Answer 1

我很确定这个问题以前有人回答过，但找不到，所以就这样:

在基本元素上设置过滤器，并在内部元素中应用变换

.base {
  -webkit-filter: drop-shadow(10px 10px 0px red);
  filter: drop-shadow(10px 10px 0px red);
}

.element {
   animation: rotate 6s linear infinite;
  border: solid 3px green;
  border-top-left-radius: 40px;
  width: 200px;
  height: 200px;
  margin: 20px;
 }

@keyframes rotate {
  from {transform: rotate(0deg);}
  to {transform: rotate(360deg);}
}

<div class="base">
  <div class="element"></div>
</div>

转换后应用过滤器

Apply filter after transformation

css

drop-shadow

css-transforms

css-filters