CSS透视百分比适配问题：第一人称房间上下墙面缩放异常

我用CSS和HTML制作第一人称视角的房间内部视图，借助3D变换和perspective属性实现了基础效果。为了让房间能随父容器或视口缩放，我使用百分比单位并省略了Z轴变换，整体效果不错，但遇到了一个问题：

左右及后方墙面在任何宽高比或尺寸下都能保持位置和形状，但顶部和底部墙面仅在方形或竖屏宽高比下正常显示，其他情况会因长度过短露出白色背景。我尝试调整transform但没有效果，目前只能将上下墙面的高度设为2000%这类超大值，但这显然不是合理的解决方案。

我的代码 #

CSS 代码

:root {
    
}

body {
    margin: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
}

div#main {
    height: 100vh;
    width: 100vw;
}

/* Walls with perspective */

div#scene-3d {
    height: 100%;
    perspective: 600px;
    width: 100%;
}

div#room {
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    width: 100%;
}

div.room-face {
/*  backface-visibility: hidden; */
    height: 100%;
    position: absolute;
    width: 100%;
}

.room-face#face-back {
    background: #333;
    transform: rotateY(90deg) translateX(100%) rotateY(-90deg);
}

.room-face#face-left {
    background: #ddd;
    transform: translateX(-50%) rotateY(90deg) translateX(50%);
}

.room-face#face-right {
    background: #bbb;
    transform: translateX(50%) rotateY(-90deg) translateX(-50%);
}

.room-face#face-top {
    background: #666;
    transform: translateY(-50%) rotateX(-90deg) translateY(50%);
}

.room-face#face-bottom {
    background: #999;
    transform: translateY(50%) rotateX(90deg) translateY(-50%);
}

HTML 代码

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Merlin le Roi</title>
        <link rel="stylesheet" href="index.css">
    </head>

    <body>
        <div id="main">
            <div id="scene-3d">
                <div id="room">
                    <div class="room-face" id="face-back">Back</div>
                    <div class="room-face" id="face-right">Right</div>
                    <div class="room-face" id="face-left">Left</div>
                    <div class="room-face" id="face-top">Top</div>
                    <div class="room-face" id="face-bottom">Bottom</div>
                </div>
            </div>
        </div>
    </body>
</html>

原因分析 #

核心问题在于上下墙面的尺寸适配逻辑：

• 左右侧墙以容器宽度为基准，旋转后其有效高度会自动适配容器的垂直空间，无论宽高比如何都能填满视野；
• 而上下墙面原本以容器高度为基准，当视口是横屏时，这个高度对应的水平视觉长度不足以覆盖整个横向视野，因此会露出背景。

要解决这个问题，上下墙面的有效尺寸需要覆盖视口的最大对角线范围，这样无论宽高比怎么变化，都能完全填充视野。

修复方案 #

修改上下墙面的尺寸和变换参数，具体调整如下：

修改后的 CSS 代码 #

:root {
    
}

body {
    margin: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
}

div#main {
    height: 100vh;
    width: 100vw;
}

/* Walls with perspective */

div#scene-3d {
    height: 100%;
    perspective: 600px;
    width: 100%;
}

div#room {
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    width: 100%;
}

div.room-face {
/*  backface-visibility: hidden; */
    height: 100%;
    position: absolute;
    width: 100%;
}

.room-face#face-back {
    background: #333;
    transform: rotateY(90deg) translateX(100%) rotateY(-90deg);
}

.room-face#face-left {
    background: #ddd;
    transform: translateX(-50%) rotateY(90deg) translateX(50%);
}

.room-face#face-right {
    background: #bbb;
    transform: translateX(50%) rotateY(-90deg) translateX(-50%);
}

.room-face#face-top {
    background: #666;
    /* 使用√2近似值作为尺寸，覆盖视口对角线 */
    height: 141.42%;
    width: 141.42%;
    /* 设置变换原点为底部中心，确保旋转后贴合房间顶部 */
    transform-origin: bottom center;
    /* 先偏移修正放大后的位置，再旋转 */
    transform: translate(-20.71%, -100%) rotateX(-90deg);
}

.room-face#face-bottom {
    background: #999;
    /* 使用√2近似值作为尺寸 */
    height: 141.42%;
    width: 141.42%;
    /* 设置变换原点为顶部中心，确保旋转后贴合房间底部 */
    transform-origin: top center;
    /* 偏移修正位置后旋转 */
    transform: translate(-20.71%, 0) rotateX(90deg);
}

关键调整说明 #

1. 尺寸设置：141.42%是√2的近似值，这个尺寸能保证墙面在任何宽高比下都覆盖视口的对角线范围，避免露出空白；
2. 变换原点：调整transform-origin让墙面以正确的边为旋转轴，确保旋转后完美贴合房间的顶部和底部；
3. 位置修正：translate(-20.71%, ...)是补偿放大后的偏移，计算方式为(141.42% - 100%)/2 ≈ 20.71%，让墙面居中对齐容器。

这样修改后，上下墙面就能在所有宽高比的视口下正常显示，无需使用超大高度的临时方案。

内容的提问来源于stack exchange，提问作者emssej