立方体在其角落旋转答案

【问题标题】：Cube spinning on its corner立方体在其角落旋转
【发布时间】：2017-06-09 14:37:40
【问题描述】：

我有一个由纯 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

【问题讨论】：

标签： html css 3d css-transforms rotatetransform

【解决方案1】：

找到答案：

根据Blender 上的帖子，水平和立方体在其原始位置之间的左右角度不是45deg（我假设），而只是35.2644deg。

因此，在我的 CSS 中，我必须将每次出现的 transform: rotateX(...) 的值更改为 35.2644deg，我曾经有 45deg 和 54.7356deg (90 - 35.2644)，我曾经有 @ 987654329@.

像这样：

.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。

【讨论】：