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, all the code. The problem is that the side face is inside the shape. I can not figure out what the problem is.

  • The screen size can be adjusted: D And yet, this is a parallelepiped. - Qwertiy ♦
  • In my head dogs spoiled, no longer think. Yes, parallelepiped of course, sealed. right: 0 helps for the verge, but when you change the width of the screen, the transients smoothly move the block. How to fix it there? - Igor Ivanov
  • Which one is red? - Crantisz
  • And then. No wonder she is red. - Igor Ivanov

2 answers 2

Change the center of transformation:

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

https://jsfiddle.net/ep73m1gn/

    Try

     #side2 { transform: rotateY(90deg); width: 100vh; background-color: red; right: 0; }

    And #cube remove the transition

    • one
      Cuba every need transitsn. Changed all to transform. Thanks for the hint. - Igor Ivanov