Применить фильтр после преобразования

Question

У меня есть прозрачное.png изображение пересекающихся линий. Если drop-shadow CSS filter применяется, только тени падают линии, а не ограничивающий прямоугольник (это не то же самое, что box-shadow).

Когда я применяю оба drop-shadow фильтр и transform: rotate, Chrome и FF сначала рисуют тень, а затем поворачивают полученное изображение (объединенное с тенью). Я хочу, чтобы повернутое изображение отбрасывало тень. (Как будто есть статический источник света, когда изображение вращается).

Возможно ли это в чистом CSS?

Единственное решение, которое я вижу, - это JS тригонометрический расчет параметров тени каждый раз, когда изображение поворачивается.

С Уважением,

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