html - 动画 3D 立方体仅适用于 Firefox

Question

我创建了一个 3D 动画立方体，它可以在两个不同的 Angular 无限旋转。魔方位于我公司新首页test website (向下滚动时在标题软件旁边)。在 Firefox 中它工作正常，但在 Google Chrome 和 Opera 中不显示立方体。在那里，如果我检查元素并在样式菜单中勾选其中一个属性，立方体将出现在面之间有间隙。在 Microsoft Edge 中，立方体显示但不旋转。我没有检查 Safari，因为我使用的是 Windows。

此外，立方体面上的图像只能在 Firefox 中正确显示，而在其他浏览器中图像会被放大，您只能看到图像中地震层的一小部分。

我已尝试在 JSFiddle 中重现该问题, 使用谷歌浏览器。将类 col 设置为 100vh 对我来说不起作用，因为它会在我们的主页上留下很大的空白空间。

如何让这个 3D 旋转立方体在所有浏览器中都能正常工作？任何帮助将不胜感激，提前致谢!

* {
    margin: 0;
}
html, body {
    height: 100%;
}
body {
    perspective: 25em;
}
.row {
    display: flex;
}
.row::after {
    display: block;
    content: '';
    clear: both;
}
.col {
    position: relative;
    flex: 1;
}
[class*='cube'] {
    position: absolute;
}
.cube {
    top: 50%;
    left: 50%;
    font-size: 8vmin;
    transform-style: preserve-3d;
    animation: cube 8s linear infinite;
}
.cube-face {
    margin: -2em;
    width: 4em;
    height: 4em;
    backface-visibility: hidden;
}
.cube-face:nth-child(1) {
    transform: translateZ(2em);
    background: url(http://test.dgbes.com/images/cube-face-1.jpg) center/contain no-repeat fixed;
}
.cube-face:nth-child(2) {
    transform: rotateY(90deg) translateZ(2em);
    background: url(http://test.dgbes.com/images/cube-face-2.jpg) center/contain no-repeat fixed;
}
.cube-face:nth-child(3) {
    transform: rotateY(180deg) translateZ(2em);
    background: url(http://test.dgbes.com/images/cube-face-3.jpg) center/contain no-repeat fixed;
}
.cube-face:nth-child(4) {
    transform: rotateY(270deg) translateZ(2em);
    background: url(http://test.dgbes.com/images/cube-face-4.jpg) center/contain no-repeat fixed;
}
.cube-face:nth-child(5) {
    transform: rotateX(90deg) translateZ(2em);
    background: url(http://test.dgbes.com/images/cube-face-5.jpg) center/contain no-repeat fixed;
}
.cube-face:nth-child(6) {
    transform: rotateX(-90deg) translateZ(2em);
    background: url(http://test.dgbes.com/images/cube-face-6.jpg) center/contain no-repeat fixed;
}
@keyframes cube {
	to {
	    transform: rotate3d(1, 1, 1, 1turn) rotate3d(1, -1, 1, 1turn);
    }
}

<div class="row">
    <div class="col">
        <div class="cube">
            <div class="cube-face"></div>
            <div class="cube-face"></div>
            <div class="cube-face"></div>
            <div class="cube-face"></div>
            <div class="cube-face"></div>
            <div class="cube-face"></div>
        </div>
    </div>
</div>

Answer 1

显然我通过移除立方体面中的固定位置解决了 Google Chrome 和 Opera 的问题。 Microsoft Edge 中仍未解决该问题。

* {
    margin: 0;
}
body {
    height: 100vh;
}
[class*=cube] {
    position: absolute;
}
.cube {
    top: 50%;
    left: 50%;
    font-size: 8vmin;
    transform-style: preserve-3d;
    animation: cube 8s linear infinite;
}
.cube-face {
    margin: -2em;
    width: 4em;
    height: 4em;
    backface-visibility: hidden;
}
.cube-face:nth-child(1) {
    transform: translateZ(2em);
    background: url(http://test.dgbes.com/images/cube-face-1.jpg) center/contain no-repeat;
}
.cube-face:nth-child(2) {
    transform: rotateY(90deg) translateZ(2em);
    background: url(http://test.dgbes.com/images/cube-face-2.jpg) center/contain no-repeat;
}
.cube-face:nth-child(3) {
    transform: rotateY(180deg) translateZ(2em);
    background: url(http://test.dgbes.com/images/cube-face-3.jpg) center/contain no-repeat;
}
.cube-face:nth-child(4) {
    transform: rotateY(270deg) translateZ(2em);
    background: url(http://test.dgbes.com/images/cube-face-4.jpg) center/contain no-repeat;
}
.cube-face:nth-child(5) {
    transform: rotateX(90deg) translateZ(2em);
    background: url(http://test.dgbes.com/images/cube-face-5.jpg) center/contain no-repeat;
}
.cube-face:nth-child(6) {
    transform: rotateX(-90deg) translateZ(2em);
    background: url(http://test.dgbes.com/images/cube-face-6.jpg) center/contain no-repeat;
}
@keyframes cube {
	to {
	    transform: rotate3d(1, 1, 1, 1turn) rotate3d(1, -1, 1, 1turn);
    }
}

<div class="cube">
    <div class="cube-face"></div>
    <div class="cube-face"></div>
    <div class="cube-face"></div>
    <div class="cube-face"></div>
    <div class="cube-face"></div>
    <div class="cube-face"></div>
</div>