Question

我有一个由纯HTML-cum-CSS制作的3D立方体，它应该在其一个角上旋转，而角落不会在屏幕周围移动。不幸的是，它并没有这么做，而是沿着一条线（2D）或一条圆（3D）摆动。我做错了什么？

#cube {
    position: relative;
    margin: 100px auto;
    height: 100px;
    width: 100px;
    animation: 4s rotateforever infinite linear;
    transform-style: preserve-3d;
}

.face {
    position: absolute;
    height: 78px;
    width: 78px;
    padding: 10px;
    border: black 2px solid;
}

.one {
    transform: rotateX(-45deg) rotateY(45deg) translateZ(50px);
}

.two {
    transform: rotateX(-45deg) rotateY(135deg) translateZ(50px);
}

.three {
    transform: rotateX(-45deg) rotateY(225deg) translateZ(50px);
}

.four {
    transform: rotateX(-45deg) rotateY(315deg) translateZ(50px);
}

.five {
    transform: rotateX(45deg) rotateZ(-45deg) translateZ(50px);
}

.six {
    transform: rotateX(45deg) rotateY(180deg) rotateZ(-45deg) translateZ(50px);
}

@keyframes rotateforever {
    to {
        transform: rotateY(360deg);
    }
}

<body>
    <div id="cube">
        <div class="face one">one</div>
        <div class="face two">two</div>
        <div class="face three">three</div>
        <div class="face four">four</div>
        <div class="face five">five</div>
        <div class="face six">six</div>
    </div>
</body>

JSFiddle

Answer 1

找到答案：

根据Blender上的帖子，水平位置与原始位置的立方体之间的左右角度不是45deg（正如我所假设的），而只是35.2644deg。< / p>

因此，在我的CSS中，我必须将transform: rotateX(...)每次出现的值更改为35.2644deg，而我曾经45deg和54.7356deg（90 - 35.2644）我过去常常-45deg。

像这样：

.one {
    transform: rotateX(-54.7356deg) rotateY(45deg) translateZ(50px);
}

.two {
    transform: rotateX(-54.7356deg) rotateY(135deg) translateZ(50px);
}

.three {
    transform: rotateX(-54.7356deg) rotateY(225deg) translateZ(50px);
}

.four {
    transform: rotateX(-54.7356deg) rotateY(315deg) translateZ(50px);
}

.five {
    transform: rotateX(35.2644deg) rotateZ(-45deg) translateZ(50px);
}

.six {
    transform: rotateX(35.2644deg) rotateY(180deg) rotateZ(-45deg) translateZ(50px);
}

我更新了JSFiddle。

立方体在它的角落旋转

1 个答案: