Question

我成功地在立方体中创建了一个立方体，一个Tesseract。但由于某种原因，我真的无法解释，在动画进行过程中，立方体正在向下移动。

如果您观看浏览器的滚动条，则整个多维数据集正在向下移动。

是的，当然你可以＆＃34;忽略＆＃34;这个问题是通过改变parent-div-element的边距但是没有解决它。

＆＃13;

@-webkit-keyframes cube-spin {
    from {
        -webkit-transform: rotateY(0deg);
                transform: rotateY(0deg);
    }
    to {
        -webkit-transform: rotateY(360deg);
                transform: rotateY(360deg);
    }
}

@keyframes cube-spin {
    from {
        -webkit-transform: rotateY(0deg);
                transform: rotateY(0deg);
    }
    to {
        -webkit-transform: rotateY(360deg);
                transform: rotateY(360deg);
    }
}

@-webkit-keyframes counter-rot {
    from {
        -webkit-transform: rotateY(0deg);
                transform: rotateY(0deg);
    }
    to {
        -webkit-transform: rotateY(-360deg);
                transform: rotateY(-360deg);
    }
}

@keyframes counter-rot {
    from {
        -webkit-transform: rotateY(0deg);
                transform: rotateY(0deg);
    }
    to {
        -webkit-transform: rotateY(-360deg);
                transform: rotateY(-360deg);
    }
}

.cube-wrap {
    -webkit-perspective: 800px;
            perspective: 800px;
    -webkit-perspective-origin: 50% 0%;
            perspective-origin: 50% 0%;
}

.outer {
    width: 300px !important;
}

.cube {
    position: relative;
    width: 200px;
    margin: 0 auto;
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
    -webkit-animation: cube-spin 8s infinite linear;
            animation: cube-spin 8s infinite linear;
}

.backendtext {
    position: absolute;
    width: 200px;
    font-size: 35px;
    text-align: center;
    font-family: sans-serif;
    text-transform: uppercase;
    -webkit-animation: counter-rot 8s infinite linear;
            animation: counter-rot 8s infinite linear;
}

.outer div {
    width: 300px;
    height: 300px;
    background: rgba(255, 116, 0, 0.1);
    line-height: 530px;
}

.inner div {
    width: 200px;
    height: 200px;
    background: rgba(153, 69, 0, 0.7);
}

.cube div {
    position: absolute;
    box-shadow: inset 0 0 30px rgba(125,125,125,0.8);
    font-size: 35px;
    text-align: center;
    font-family: sans-serif;
    text-transform: uppercase;
}

.depth div.front-pane {
    -webkit-transform: translateY(-100px) translateZ(100px);
            transform: translateY(-100px) translateZ(100px);
}

.outer.depth div.front-pane {
    -webkit-transform: translateY(-150px) translateZ(150px);
            transform: translateY(-150px) translateZ(150px);
}

.depth div.back-pane {
    -webkit-transform: translateY(-100px) translateZ(-100px) rotateY(180deg);
            transform: translateY(-100px) translateZ(-100px) rotateY(180deg);
}

.outer.depth div.back-pane {
    -webkit-transform: translateY(-150px) translateZ(-150px) rotateY(180deg);
            transform: translateY(-150px) translateZ(-150px) rotateY(180deg);
}

.depth div.left-pane {
    -webkit-transform: translateY(-100px) translateX(100px) rotateY(-270deg);
            transform: translateY(-100px) translateX(100px) rotateY(-270deg);
}

.outer.depth div.left-pane {
    -webkit-transform: translateY(-150px) translateX(150px) rotateY(-270deg);
            transform: translateY(-150px) translateX(150px) rotateY(-270deg);
}

.depth div.right-pane {
    -webkit-transform: translateY(-100px) translateX(-100px) rotateY(270deg);
            transform: translateY(-100px) translateX(-100px) rotateY(270deg);
}

.outer.depth div.right-pane {
    -webkit-transform: translateY(-150px) translateX(-150px) rotateY(270deg);
            transform: translateY(-150px) translateX(-150px) rotateY(270deg);
}

.depth div.top-pane {
    -webkit-transform: translateY(-200px) rotateX(-90deg);
            transform: translateY(-200px) rotateX(-90deg);
}

.outer.depth div.top-pane {
    -webkit-transform: translateY(-300px) rotateX(-90deg);
            transform: translateY(-300px) rotateX(-90deg);
}

.depth div.bottom-pane {
    -webkit-transform: rotateX(90deg);
            transform: rotateX(90deg);
}

＆＃13;

<div style="height: 300px; margin-top: 400px;">
  <div class="cube-wrap">
  <div class="cube depth inner">
    <a class="backendtext">Backend</a>
    <div class="front-pane"></div>
    <div class="back-pane"></div>
    <div class="top-pane"></div>
    <div class="bottom-pane"></div>
    <div class="left-pane"></div>
    <div class="right-pane"></div>
  </div>
  <div class="cube depth outer">
    <div class="front-pane">Frontend</div>
    <div class="back-pane">Frontend</div>
    <div class="top-pane"></div>
    <div class="bottom-pane"></div>
    <div class="left-pane">Frontend</div>
    <div class="right-pane">Frontend</div>
  </div>
</div>

＆＃13;

//编辑：适用于Chrome和Edge。将尝试为所有内容添加前缀，看看它是否解决了问题。

// EDIT2：添加了前缀，仍然无法在Firefox上运行，但在Chrome，Edge等上正常运行。

// EDIT3：将立方体包装的溢出设置为隐藏但我仍然想知道原因。

CSS-Tesseract（Cube）的奇怪行为

0 个答案: