Box in CSS. Side edge problem

Question:

https://jsfiddle.net/nevolgograd/v4ac3g7w/

#wrapper {
  perspective: 1500px;
}
#cube {
    position: relative;
  width: 100vw;
  height: 100vh;
  transform-origin: 50% 50% -50vh;
  transform-style: preserve-3d;
  // transition: all cubic-bezier(.21,.66,.43,.82) 5s;
  transition: all ease-in-out 1s;
}
.side {
    width: 100vw;
    height: 100vh;
  background-color: #BADA55;
  opacity: .5;
    position: absolute;
    border: 1px dashed #cf0ae6;
    transform-origin: 50% 50% -50vh;
    // -webkit-backface-visibility: hidden;
}

#menu-list {
    display: flex;
    flex-flow: nowrap row;
    justify-content: space-around;
  background-color: #9efff0;
  opacity: 0.5;
}

#side2{     
    transform: rotateY(90deg);
    width: 100vh;
  background-color: red;
}
#side3{     
    transform: rotateY(-90deg);
    width: 100vh;
}
#side4{ transform: rotateX(90deg); }
#side5{ transform: rotateX(-90deg); }
#side6{ transform: rotateY(180deg); }

Here, in fact, is all the code. The problem is that the side face is inside the shape. I just can't figure out what the problem is.

Answer:

Change the transformation center:

#side2 {
    ...
    transform-origin: 50vw 50% -50vw;
}

https://jsfiddle.net/ep73m1gn/

Scroll to Top