立方体在它的角上旋转

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 上的 post，水平线和立方体在其原始位置的左右角不是 45deg（正如我假设的那样），而只是 35.2644deg.

因此，在我的 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。

立方体在它的角上旋转

Cube spinning on its corner

html

css

3d

rotatetransform

css-transforms