Question

我正在努力创建一个“房间”，让访客“坐在”中间，看着它旋转着。有点像喝醉了：D

我开始讲一些关于制作立方体并让它旋转的教程。从那里开始，我花了很长时间才意识到通过玩立方体大小和整体透视量，我可以在他们在访客后面“旋转”时切掉立方体的一些面。

请参阅此处（适用于我认为的FF和Chrome）：http://jsfiddle.net/jq2j7/

透视设置为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>

CSS （我没有在这里包含BG图像所以请注意这将呈现一个看不见的立方体：P）

@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);
}

重新审视CSS 3D Cube; 3D室

0 个答案: