Box in CSS. Side edge problem


#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;

    transform: rotateY(90deg);
    width: 100vh;
  background-color: red;
    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.


Change the transformation center:

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

Scroll to Top