3D长方体面对齐css(3D Cuboid face alignment css)

我正在尝试使用HTML / CSS创建一个响应的长方体，但长方体的右面没有与剩余的面对齐。 任何人都可以帮我解决这个问题吗？

我正在粘贴jsfiddle链接，如下所示：

#container {
    width: 100vw;
    height: 100vh;
    perspective: 1000px;
    perspective-origin: 50% 50%;
}

#container div {
    height: 100vh;
    /*width: 100%;*/
    position: absolute;
    /*display: inline-block;*/
    transform-origin: 50% 50%;
    transform-style: preserve-3d;
}

#left {
    width: 100vh;
    background: steelblue;
    transform: translateX(-50vh) translateZ(-50vh) rotateY(90deg);
}
#right {
    width: 100vh;
    background: teal;
    transform: translateX(50vw)  rotateY(-90deg);
}
#floor {
    width: 100%;
    background: #55DF03;
    transform: translateY(50vh) translateZ(-50vh) rotateX(90deg);
}
#ceil {
    width: 100%;
    background: grey;
    transform: translateY(-50vh) translateZ(-50vh) rotateX(90deg);
}
#back {
    width: 100%;
    background: #2091FE;
    transform: translateZ(-100vh);
} 
  
<div id="container">
    <div id="left"></div>
    <div id="floor"></div>
    <div id="right"></div>
    <div id="ceil"></div>
    <div id="back"></div>
</div> 
  
 
 
 https://jsfiddle.net/srikanthaero/4s8wovjm/ 
I am trying to make a responsive cuboid using HTML/CSS but the right face of the cuboid is not aligning with the remaining faces. Can anyone help me out with this?
 
I am pasting a jsfiddle link for the same, below:
 
 
 
  
  
#container {
    width: 100vw;
    height: 100vh;
    perspective: 1000px;
    perspective-origin: 50% 50%;
}

#container div {
    height: 100vh;
    /*width: 100%;*/
    position: absolute;
    /*display: inline-block;*/
    transform-origin: 50% 50%;
    transform-style: preserve-3d;
}

#left {
    width: 100vh;
    background: steelblue;
    transform: translateX(-50vh) translateZ(-50vh) rotateY(90deg);
}
#right {
    width: 100vh;
    background: teal;
    transform: translateX(50vw)  rotateY(-90deg);
}
#floor {
    width: 100%;
    background: #55DF03;
    transform: translateY(50vh) translateZ(-50vh) rotateX(90deg);
}
#ceil {
    width: 100%;
    background: grey;
    transform: translateY(-50vh) translateZ(-50vh) rotateX(90deg);
}
#back {
    width: 100%;
    background: #2091FE;
    transform: translateZ(-100vh);
} 
  
<div id="container">
    <div id="left"></div>
    <div id="floor"></div>
    <div id="right"></div>
    <div id="ceil"></div>
    <div id="back"></div>
</div> 
  
 
 
https://jsfiddle.net/srikanthaero/4s8wovjm/
                
最满意答案
                
                    
                        
 这是响应式3D Cuboid面部： 
 
 
 
  
  
	#container {
		width: 100vw;
		height: 100vh;
		perspective: 1000px;
		perspective-origin: 50% 50%;
	}

	#container div {
		height: 100vh;
		/*width: 100%;*/
		position: absolute;
		/*display: inline-block;*/
		transform-origin: 50% 50%;
		transform-style: preserve-3d;
	}

	#left {
		width: 100vh;
		background: steelblue;
		transform: translateX(-50vh) translateZ(-50vh) rotateY(90deg);
	}
#right {
    width: 100vh;
    background: teal;
    transform: translateX(0%) rotateY(-90deg);
    right: 0px;
    TRANSFORM-ORIGIN: 100% 100% !important;
}
	#floor {
		width: 100%;
		background: #55DF03;
		transform: translateY(50vh) translateZ(-50vh) rotateX(90deg);
	}
	#ceil {
		width: 100%;
		background: grey;
		transform: translateY(-50vh) translateZ(-50vh) rotateX(90deg);
	}
	#back {
		width: 100%;
		background: #2091FE;
		transform: translateZ(-100vh);
	} 
  
<div id="container">
	<div id="left"></div>
	<div id="floor"></div>
	<div id="right"></div>
	<div id="ceil"></div>
	<div id="back"></div>
</div>   
  
 
Here is the responsive 3D Cuboid face:
 
 
 
  
  
	#container {
		width: 100vw;
		height: 100vh;
		perspective: 1000px;
		perspective-origin: 50% 50%;
	}

	#container div {
		height: 100vh;
		/*width: 100%;*/
		position: absolute;
		/*display: inline-block;*/
		transform-origin: 50% 50%;
		transform-style: preserve-3d;
	}

	#left {
		width: 100vh;
		background: steelblue;
		transform: translateX(-50vh) translateZ(-50vh) rotateY(90deg);
	}
#right {
    width: 100vh;
    background: teal;
    transform: translateX(0%) rotateY(-90deg);
    right: 0px;
    TRANSFORM-ORIGIN: 100% 100% !important;
}
	#floor {
		width: 100%;
		background: #55DF03;
		transform: translateY(50vh) translateZ(-50vh) rotateX(90deg);
	}
	#ceil {
		width: 100%;
		background: grey;
		transform: translateY(-50vh) translateZ(-50vh) rotateX(90deg);
	}
	#back {
		width: 100%;
		background: #2091FE;
		transform: translateZ(-100vh);
	} 
  
<div id="container">
	<div id="left"></div>
	<div id="floor"></div>
	<div id="right"></div>
	<div id="ceil"></div>
	<div id="back"></div>
</div>