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); }
Тут, собственно, весь код. Проблема в том, что боковая грань находится внутри фигуры. Никак не могу сообразить в чем проблема.