Dönüşümü yaptıktan sonra filtreyi uygula

Question

Transparan .png geçiş çizgileri resmim var. drop-shadow CSS filter uygulanırsa, yalnızca satırlar gölge sınırlar, sınırlayıcı rect değil (box-shadow ile aynı değildir).

Hem drop-shadow filtresini hem de transform: rotate'u uygularken Chrome ve FF önce gölgeyi çizer, ardından ortaya çıkan resmi döndürür (gölge ile birleştirilir). Döndürülmüş görüntünün gölge düşürmesini istiyorum. (Görüntü döndüğünde statik bir ışık kaynağı varmış gibi).

Saf CSS'de mümkün mü?

Gördüğüm tek çözüm, görüntünün her döndüğünde gölge parametrelerinin JS trigonometrik olarak hesaplanmasıdır.

Selamlar,

Answer 1

Ben, bu soru önce cevap edildiğini oldukça emin değilim, ama onu bulamadım işte o da:

bir taban elemanı filtreyi ayarlayın ve dönüşümü uygulamak

iç birinde

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