CSS поворачивает ключевые кадры в сочетании с проблемой отбрасывания фильтра - PullRequest
Новая
       35

CSS поворачивает ключевые кадры в сочетании с проблемой отбрасывания фильтра

0 голосов
/ 12 апреля 2019

У меня проблема с анимацией div в сочетании с drop-shadow. Я пытаюсь повернуть div "room__wrap", используя ключевые кадры: 

@keyframes rot {
    0%{
        transform:rotate(0deg);
    }
    100%{
        transform:rotate(360deg);
    }
}

Теперь я хочу добавить фильтр к слоям, добавив следующий фрагмент кода CSS: 

        -webkit-filter: drop-shadow(2px 2px 0 cyan) drop-shadow(-2px 2px 0 cyan) drop-shadow(2px -2px 0 cyan) drop-shadow(-2px -2px 0 cyan);
        filter: drop-shadow(2px 2px 0 cyan) drop-shadow(-2px 2px 0 cyan) drop-shadow(2px -2px 0 cyan) drop-shadow(-2px -2px 0 cyan);

Все отлично работает. Только когда div вертикальный, слои обрезаются. Это происходит только тогда, когда тень была добавлена. У кого-нибудь есть идеи, как мне это решить?

Codepen: https://codepen.io/dontwan/pen/OGgwmp

Рисунок 1 - Без тени _____ Рисунок 2 - С тенью: image image

Заранее спасибо!

...