变换后应用过滤器

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>

​