转换后应用过滤器答案

【问题标题】：Apply filter after transformation转换后应用过滤器
【发布时间】：2016-04-01 15:03:35
【问题描述】：

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

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

纯CSS可以吗？

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

问候，

【问题讨论】：

请发一个小提琴，以便我们更好地理解。
@geeksal jsfiddle.net/noober/mojLqept/1
您是否希望阴影在一个地方保持静止。我只是很难理解你想要什么。我认为图像插图可以达到目的。
只是意识到使用 JS 的 jsfiddle 是您想要使用 CSS 实现的。如果是，那么不要只发布另一个带有 CSS 代码的 jsfiddle。
@geeksal 抱歉，如果问题不够清楚。这是一个优先事项。如果您在转换之前应用过滤器，您将看到与在过滤器之前应用的转换相比不同的结果。

标签： css css-transforms css-filters drop-shadow

【解决方案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>

【讨论】：

是的，它有效。谢谢！我确信内部元素会投下一个盒装阴影。