変換後にフィルタを適用する

Question

私は、交差する線の透明な.png画像を持っています。 drop-shadow CSS filterが適用されている場合は、境界矩形ではなく、線だけがドロップされます（box-shadowと同じではありません）。

drop-shadowフィルタとtransform: rotateの両方を適用すると、ChromeとFFが最初にシャドウを描画してから、その結果の画像をシャドウにマージして回転します。回転した画像を代わりに影を落としたい。 （静的な光源があるかのように、画像が回転するとき）。

純粋なCSSでも可能ですか？

私が見る唯一の解決策は、画像が回転するたびにシャドウパラメータのJS三角法による計算です。

よろしく、

Answer 1

私はこの質問をする前に回答されていることをかなり確信しているが、それを見つけることができなかったので、ここではそれが行く：

が基本要素にフィルタを設定し、変換を適用私たちがよりよく理解できるように、内側の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>