noober noober - 1 year ago 78
CSS Question

Apply filter after transformation


Answer Source

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>