我正在尝试使用 CSS 和 HTML 从第一人称视角制作房间内部的视图。使用 3D 变换和透视属性非常简单 - 互联网上的教程解释得很好，我很快就掌握了。
但是，出于我的目的，我希望房间与其父容器或视口一起缩放，因此它需要具有响应能力。为此，我开始使用百分比并省略 Z 变换，效果非常好。
效果几乎完美——无论纵横比或大小如何，后、左、右脸都保持在原来的位置并保持其形状。然而，顶面和底面似乎只有在长宽比为正方形或纵向时才能正确显示。不然顶面和底面太短，就能看到白色背景。
: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%);
}
/***/<!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>我在这里缺少什么？为什么侧面缩放和调整得当，而顶部和底部却显得很短？
我尝试摆弄变换，但无济于事。目前看来唯一的解决办法就是将顶面和底面的高度设置为一些荒谬的值，比如 2000%，但这似乎不是一个好的解决办法。
这是因为元素的大小不适合填充屏幕。如果仅用于渲染，您可以增加大小，或者应用例如盒子阴影。
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%);
box-shadow: 0 0 0 100vmax #666;
}
.room-face#face-bottom {
background: #999;
transform: translateY(50%) rotateX(90deg) translateY(-50%);
box-shadow: 0 0 0 100vmax #999;
}<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>