У меня проблема с анимацией 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 - С тенью:
Заранее спасибо!