3D Cuboid face alignment css - html

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>

Answer 2

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.