@charset "utf-8";
.blind{position:absolute;clip:rect(0 0 0 0);margin:-1px;width:1px;height:1px;overflow:hidden;}

/*
.room_wrap{position:absolute;top:0;bottom:0;left:0;right:0;background:pink;opacity:.3;}
.room_frame{position:absolute;top:0;bottom:0;left:0;right:0;}
.room_frame .left_wall{position:absolute;top:240px;left:200px;width:610px;height:540px;background:blue;opacity:.8;transform:skewY(-25deg);}
.room_frame .right_wall{position:absolute;top:240px;left:810px;width:610px;height:540px;background:blue;opacity:.5;transform:skewY(25deg);}
.room_frame .floor{position:absolute;top:500px;left:500px;width:500px;height:500px;background:red;opacity:.5;transform:skewX(30deg)}*/

*,
*::after,
*::before{margin:0;padding:0;box-sizing:border-box;user-select:none;transform-style:preserve-3d;-webkit-tap-highlight-color:transparent;}
body{display:flex;justify-content:center;align-items:center;width:100%;height:100vh;background:rgba(0,0,0,.3);overflow:hidden;}
.face{position:absolute;}

.space_room{position:absolute;width:35vw;height:35vw;transform:perspective(1250px) rotateX(70deg) /*rotateZ(45deg)*/ rotateZ(70deg) translateZ(-10vw);background:#f2dbff;}
.space_room .floor{position:absolute;top:0;left:0;width:35vw;height:35vw;}
.space_room .floor .floor_front{width:35vw;height:1vw;transform-origin:top left;transform:rotateX(-90deg) translateY(-1vw) translateZ(35vw);background-color:red;}
.space_room .floor .floor_back{width:35vw;height:1vw;transform-origin:top left;transform:rotateX(90deg);background-color:yellow;}
.space_room .floor .floor_left{width:35vw;height:1vw;transform-origin:top left;transform:rotateY(-90deg) rotateZ(90deg) translateY(-1vw);background-color:green;}
.space_room .floor .floor_right{width:35vw;height:1vw;transform-origin:top left;transform:rotateY(-90deg) rotateZ(90deg) translateY(-1vw) translateZ(-35vw);background-color:#5a46ff;}
.space_room .floor .floor_bottom{width:35vw;height:35vw;transform-origin:top left;transform:rotateY(0deg);background-color:#383358;}

.space_room .wall_wrap .wall .side_front{width:35vw;height:30vw;transform-origin:bottom left;transform:rotateX(-90deg) translateZ(-30vw);background-image:linear-gradient(to bottom, #504c6f, #595388 30%, #7a6bd8);}
.space_room .wall_wrap .wall .side_back{width:35vw;height:30vw;transform-origin:bottom left;transform:rotateX(-90deg) translateZ(-31vw);background:green}
.space_room .wall_wrap .wall .side_left{width:1vw;height:30vw;transform-origin:bottom left;transform:rotateX(-90deg) rotateY(90deg) translateX(30vw);background:blue;}
.space_room .wall_wrap .wall .side_right{width:1vw;height:30vw;transform-origin:bottom left;transform:rotateX(-90deg) rotateY(90deg) translateX(30vw) translateZ(35vw);background:yellow;}
.space_room .wall_wrap .wall .side_top{width:1vw;height:35vw;transform-origin:bottom left;transform:rotateZ(90deg) translateX(-36vw) translateZ(30vw);background:blue;}
.space_room .wall_wrap .wall .side_bottom{width:1vw;height:35vw;transform-origin:bottom left;transform:rotateZ(90deg) translateX(-36vw);background:blue;}
.space_room .wall_wrap .wall.left{transform:rotateZ(-90deg) translateX(-17.5vw) translateY(-17.5vw);}

.space_room .door_wrap{position:absolute;top:0;left:3vw;width:10vw;height:.5vw;}
.space_room .door_wrap .door_front{width:10vw;height:20vw;transform-origin:bottom left;transform:rotateX(-90deg) translateZ(-19.99vw);border:0.125vw solid yellow;background:green;}