CSS Cube not rotating properly - html

Question

I am trying to make a cube with basic HTML and CSS. I have rotated every side on their position but on rotating the whole cube, I can see some blank area. Don't know what the problem is. Please help me solve this.
body {
width: 100vw;
height: 100vh;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center; }
#container {
position: relative;
width: 100px;
height: 100px;
border-radius: 20px;
background: transparent;
perspective: 9990px;
transform: rotateY(80deg);
transform-style: preserve-3d;
transform-origin: 50px 50px 0; }
#container .face {
width: 100px;
height: 100px;
background: #ddd;
position: absolute;
transition: all 0.2s;
backface-visibility: hidden;
border: 1px solid black; }
#container #face1 {
background: green;
transform: translateZ(-50px); }
#container #face2 {
background: red;
transform: translateX(50px) rotateY(90deg); }
#container #face3 {
background: blue;
transform: translateX(-50px) rotateY(90deg); }
#container #face4 {
background: yellow;
transform: translateZ(50px); }
#container #face5 {
background: purple;
transform: translateY(-50px) rotateX(90deg); }
#container #face6 {
background: cyan;
transform: translateY(50px) rotateX(90deg); }
<div id="container">
<div class="face" id="face1"></div>
<div class="face" id="face2"></div>
<div class="face" id="face3"></div>
<div class="face" id="face4"></div>
<div class="face" id="face5"></div>
<div class="face" id="face6"></div>
</div>

Answer 1

You are almost good, you need to define perspective on the body element (the parent of the cube) and you can get rid of backface-visibility: hidden;
body {
width: 100vw;
height: 100vh;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
perspective: 500px; /* here */
}
#container {
position: relative;
width: 100px;
height: 100px;
border-radius: 20px;
background: transparent;
transform: rotateY(20deg) rotateX(30deg);
transform-style: preserve-3d;
transform-origin: 50px 50px 0;
}
#container .face {
width: 100px;
height: 100px;
background: #ddd;
position: absolute;
transition: all 0.2s;
/*backface-visibility: hidden;*/
border: 1px solid black;
}
#container #face1 {
background: green;
transform: translateZ(-50px);
}
#container #face2 {
background: red;
transform: translateX(50px) rotateY(90deg);
}
#container #face3 {
background: blue;
transform: translateX(-50px) rotateY(90deg);
}
#container #face4 {
background: yellow;
transform: translateZ(50px);
}
#container #face5 {
background: purple;
transform: translateY(-50px) rotateX(90deg);
}
#container #face6 {
background: cyan;
transform: translateY(50px) rotateX(90deg);
}
<div id="container">
<div class="face" id="face1"></div>
<div class="face" id="face2"></div>
<div class="face" id="face3"></div>
<div class="face" id="face4"></div>
<div class="face" id="face5"></div>
<div class="face" id="face6"></div>
</div>

Answer 2

I just made a light edit on #container .face css rules, and the blank area is not visble. Is it well what you need ?
body {
width: 100vw;
height: 100vh;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center; }
#container {
position: relative;
width: 100px;
height: 100px;
border-radius: 20px;
background: transparent;
perspective: 9990px;
transform: rotateY(80deg);
transform-style: preserve-3d;
transform-origin: 50px 50px 0; }
#container .face {
width: 100px;
height: 100px;
background: #ddd;
position: absolute;
transition: all 0.2s;
backface-visibility: visible; /* changed from hidden to visible */
border: 1px solid black; }
#container #face1 {
background: green;
transform: translateZ(-50px); }
#container #face2 {
background: red;
transform: translateX(50px) rotateY(90deg); }
#container #face3 {
background: blue;
transform: translateX(-50px) rotateY(90deg); }
#container #face4 {
background: yellow;
transform: translateZ(50px); }
#container #face5 {
background: purple;
transform: translateY(-50px) rotateX(90deg); }
#container #face6 {
background: cyan;
transform: translateY(50px) rotateX(90deg); }
<div id="container">
<div class="face" id="face1"></div>
<div class="face" id="face2"></div>
<div class="face" id="face3"></div>
<div class="face" id="face4"></div>
<div class="face" id="face5"></div>
<div class="face" id="face6"></div>
</div>