保留3D策略和Firefox Quantum，其他浏览器

Question

在过去的一两年里，我使用了一些3D CSS变换动画链接和缩略图动画，基于我在网站上发现的东西。我在JS Fiddle上发布了代码。这个3D动画在Firefox 57及以前版本中运行，但从Firefox 58+和Quantum开始，它不再有效。在查看它时，它看起来都是平的，并且检查元素它呈现3D矩阵但不以3D显示，尽管调用了保留的3D元素。

https://jsfiddle.net/f00dl3/1Ludb783/1/

@-webkit-keyframes spinner {
    from {
        -webkit-transform: rotateY(0deg);
    }
    to {
        -webkit-transform: rotateY(-360deg);
    }
}

@keyframes spinner {
    from {
        -moz-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    to {
        -moz-transform: rotateY(-360deg);
        -ms-transform: rotateY(-360deg);
        transform: rotateY(-360deg);
    }
}

#stage {
    perspective: 1200px;
    margin: 1em auto;
    transform-style: preserve-3d;
    -webkit-perspective: 1200px;
    -moz-perspective: 1200px;
    -ms-perspective: 1200px;
}

#spinner {
    -webkit-animation-name: spinner;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 6s;

    animation-name: spinner;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 6s;

    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

#spinner:hover {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}

#spinner img {
    position: absolute !important;
    border: 1px solid #ccc;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2);

    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}