Question

我创造了一个3D动画立方体，它以两个不同的角度无限旋转。该多维数据集位于我们公司的新test website的主页上（当您向下滚动时，标题软件旁边）。在Firefox中，它可以正常工作，但在Google Chrome和Opera中，不会显示多维数据集。在那里，如果我检查元素并勾选样式菜单中的一个属性，立方体将出现在面之间的间隙。在Microsoft Edge中，显示多维数据集但不旋转。我没有检查Safari，因为我使用的是Windows。

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

我尝试使用Google Chrome在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>

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

1 个答案: