Apply filter after transformation

Question

I have a transparent .png image of crossing lines. If the drop-shadow CSS filter is applied, only the lines drop shadow, not the bounding rect (it's not the same as box-shadow).

When I apply both drop-shadow filter and transform: rotate, Chrome and FF draw the shadow first, then rotate the resulting image (merged with the shadow). I want the rotated image to drop shadow instead. (As if there is a static light source, when the image rotates).

Is it possible in pure CSS?

The only solution I see is JS trigonometrical calculation of the shadow parameters every time the image rotates.

Regards,

did you want the shadow to remain static in one place. I am just having the difficulty in understanding what you want. I think an image illustration will serve the purpose. — geeksal, Apr 01 '16 at 17:48
just realize is that jsfiddle using JS is what you want to achive using CSS. If yes than just post another jsfiddle with CSS code you have worked so far. — geeksal, Apr 01 '16 at 17:50
@geeksal Sorry, if the question is not clear enough. It's a matter of priorities. If you apply the filter before the transformation you will see a different result comparing to the transformation applied before the filter. — noober, Apr 01 '16 at 18:16

score 4 · Accepted Answer · answered Apr 01 '16 at 17:25

I am quite sure that this question has been answered before, but couldn't find it, so here it goes:

set the filter on a base element, and apply the transform in the inner one

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

Yes, it works. Thank you! I was sure that an inner element would drop a boxed shadow. — noober, Apr 01 '16 at 18:13

Apply filter after transformation

1 Answers1