CSS三维立方体修改；三维空间 我试图创造一个“房间”，访问者“坐”在中间，看着它绕着它们旋转。有点像喝醉了：D

我从一些制作立方体并使其旋转的教程开始。从那以后，我很快就意识到，通过使用立方体的大小和整体透视量，我可以在立方体的某些面“在”访客身后旋转时，将其切掉

请参见此处（我相信适用于FF和Chrome）：

透视设置为50em。 立方体的“大小”是100em，是透视图的两倍，因此（我怀疑）将“相机”放置在立方体的中心

这样对我来说比较合适，但是房间不够大。我希望它更像“学校礼堂”的大小，而不是“花园小屋”的大小。这就是我遇到麻烦的地方。

如果我减少整体透视，我可以让房间看起来更大，但有一种鱼眼效果。如果我增加立方体的大小，“摄影机”就会被推回立方体

我本以为我可以根据需要将整个立方体平移到屏幕上或远离屏幕，但我没能做到这一点（我在.cube上甚至在主体上尝试了一个translateZ（50em），但没有效果）

我相当肯定，将立方体的大小与场景透视图联系起来只是为了获得正确的“相机位置”可能不是最好的方法，因此如果有人能为我指出正确的方向…：D

谢谢

---

代码非常简单，如下所示：

HTML

<ul class="cube">
    <li></li><!-- Front -->
    <li></li><!-- Back -->
    <li></li><!-- Right -->
    <li></li><!-- Left -->
    <li></li><!-- Top -->
    <li></li><!-- Bottom -->
</ul>

---

好的，为了避免尴尬，我打算删除这个问题，但也许还有更好的解决办法。。。。我只是改变了纹理以显示更小的砖块，实际上房间现在看起来更大了。我仍然不确定透视图/立方体的大小是否“捆绑在一起”；在我自己的演示中，我将砖块变小了。它确实使房间看起来更大；但这还不足以让我的眼睛误以为房间就是我想要的大小。因此，我确实认为需要一些代码更改，而不仅仅是我的纹理：D

@keyframes spin {
    0% {
        transform: rotateY(0deg);
    }

    100% {
        transform: rotateY(360deg);
    }
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotateY(0deg);
    }

    100% {
        -webkit-transform: rotateY(360deg);
    }
}

* {
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    height: 100%;
}

body {
    position: relative;
    overflow: hidden;

    perspective: 50em;
    -webkit-perspective: 50em;
}

.cube, .cube li {
    position: absolute;

    width: 100em;
    height: 100em;
}

.cube {
    top: 50%;
    left: 50%;

    margin-top: -50em;
    margin-left: -50em;

    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;

    animation-name: spin;
    -webkit-animation-name: spin;
    animation-duration: 25s;
    -webkit-animation-duration: 25s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    animation-timing-function: linear;
    -webkit-animation-timing-function: linear;

    list-style-type: none;
}

.cube > li {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.cube > li:nth-child(1) {
    transform: rotateY(0deg) translateZ(50em);
    -webkit-transform: rotateY(0deg) translateZ(50em);
}

.cube > li:nth-child(2) {
    transform: rotateX(180deg) translateZ(50em);
    -webkit-transform: rotateX(180deg) translateZ(50em);
}

.cube > li:nth-child(3) {
    transform: rotateY(90deg) translateZ(50em);
    -webkit-transform: rotateY(90deg) translateZ(50em);
}

.cube > li:nth-child(4) {
    transform: rotateY(-90deg) translateZ(50em);
    -webkit-transform: rotateY(-90deg) translateZ(50em);
}

.cube > li:nth-child(5) {
    transform: rotateX(90deg) translateZ(50em);
    -webkit-transform: rotateX(90deg) translateZ(50em);
}

.cube > li:nth-child(6) {
    transform: rotateX(-90deg) translateZ(50em);
    -webkit-transform: rotateX(-90deg) translateZ(50em);
}