3D Cuboid face alignment css

Question

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/

Answer 1

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>