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

I have changed the way to move the elements, it's easier to change the transform origin that to play with translates:

body {
  margin: 0px;
}
#container {
  width: 100vw;
  height: 100vh;
  perspective: 1000px;
  perspective-origin: 50% 50%;
}
#container div {
  height: 100vh;
  width: 100vw;
  position: absolute;
  transform-style: preserve-3d;
}
#container #left {
  width: 100vh;
  background: steelblue;
  transform-origin: left center;
  transform: rotateY(90deg);
}
#container #right {
  width: 100vh;
  background: teal;
  transform-origin: right center;
  transform: rotateY(-90deg);
  right: 0px;
}
#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);
  opacity: 0.5;
}

<div id="container">
  <div id="left"></div>
  <div id="floor"></div>
  <div id="right"></div>
  <div id="ceil"></div>
  <div id="back"></div>
</div>

On a side note, you are asking:

For left face, when I use 'translateX(-50vh)', it aligns perfectly. But I felt that it should have aligned on 'translateX(-50vw)'. How '-50vh' is sufficient?

The left side has a width of 100vh. The transform origin is center, so the rotation of 90deg is made around a point that is 50vh (the half of 100vh) to the right of the left border of the element. To make it fit, you need to translate in X minus this amount.

Also, if you want to keep your original way of work, the right style should be

#right {
    width: 100vh;
    background: teal;
    right: 0px;
    transform: translateX(50vh) translateZ(-50vh) rotateY(-90deg);
}

Notice that positioning it to the right simplifies a lot the problem.

Answer 2

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>