CSS Cube not rotating properly

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); }

user_8620333 · Answer

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);
}

user_12374315 · Answer

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); }

CSS Cube not rotating properly

2 Answers