CSS旋转关键帧结合过滤器阴影问题

Question

与div-shadow结合使用div动画时遇到问题。 我尝试使用关键帧旋转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-有阴影：

提前谢谢！