3

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

Тут, собственно, весь код. Проблема в том, что боковая грань находится внутри фигуры. Никак не могу сообразить в чем проблема.

4
  • Размером экрана можно подогнать :D А ещё, это параллелепипед.
    – Qwertiy
    30 янв 2017 в 13:42
  • У меня в голове собаки нагадили, уже не соображаю. Да, параллелепипед конечно, опечатался. right: 0 для грани помогает, но при изменении ширины экрана транзишин плавно двигает блок. Как бы его там зафиксировать? 30 янв 2017 в 13:50
  • Какая из них, красная?
    – Crantisz
    30 янв 2017 в 13:52
  • А-то. Не зря же она красная. 30 янв 2017 в 13:58

2 ответа 2

1

Смените центр трансформации:

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

https://jsfiddle.net/ep73m1gn/

0

Попробуйте

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

И у #cube уберите transition

1
  • 1
    Кубу всяко нужен транзишн. Поменял all на transform. Спасибо за намек. 30 янв 2017 в 14:04

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.