Filter nach Transformation anwenden

Question

Ich habe ein transparentes .png Bild von sich kreuzenden Linien. Wenn die drop-shadow CSS filter angewendet wird, nur die Linien Schlagschatten, nicht die Grenze rect (es ist nicht das gleiche wie box-shadow).

Wenn ich sowohl drop-shadow Filter als auch transform: rotate anwende, zeichnen Chrome und FF zuerst den Schatten und drehen dann das resultierende Bild (mit dem Schatten verschmolzen). Ich möchte, dass das gedrehte Bild stattdessen Schatten wirft. (Als ob es eine statische Lichtquelle gibt, wenn sich das Bild dreht).

Ist es in reinem CSS möglich?

Die einzige Lösung, die ich sehe, ist JS trigonometrische Berechnung der Schattenparameter jedes Mal, wenn das Bild rotiert.

Grüße,

Answer 1

Ich bin ziemlich sicher, dass diese Frage vor beantwortet wurde, konnte es aber nicht finden, so geht es hier:

setzen Sie den Filter auf einem Basiselement und Anwendung der Transformation im inneren ein

.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>