title: CSS Cube not rotating properly
body: <p>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.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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); }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="container"&gt;
    &lt;div class="face" id="face1"&gt;&lt;/div&gt;
    &lt;div class="face" id="face2"&gt;&lt;/div&gt;
    &lt;div class="face" id="face3"&gt;&lt;/div&gt;
    &lt;div class="face" id="face4"&gt;&lt;/div&gt;
    &lt;div class="face" id="face5"&gt;&lt;/div&gt;
    &lt;div class="face" id="face6"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>