3D-преобразование вращения граней куба неуместно

Question

У меня есть этот 3d-куб: http://codepen.io/caemostajo/pen/yORNvx/, передняя и левая грани открываются при нажатии на 2-ю кнопку.

Как вы можете видеть, что левое лицо не на своем месте, я не могу разместить его там, где оно принадлежит, сохраняя его открытую анимацию. это должно выглядеть так: http://www.f-lohmueller.de/pov_tut/backgrnd/im/CubeMappingWrapping_1d_64.gif

Я пытался использовать разные значения translate3D и transform-origin, но не повезло, думаю, проблема в том, что transform-origin этого лица при нажатии кнопки.

Я надеюсь, что кто-то может помочь... лучший из лучших!

Answer 1

Я изменился:

.left-flip {
    transition: all 0.85s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-style: preserve-3d;
        transform-origin: (0px) (0px) (-$cubeHeight / 2);
        transform: rotateY(-90deg) translate3d(0%, 0, -$cubeHeight / 2);
}

а также

#radio-rotate:checked ~ .space3d .left-flip {
    transform: rotateY(-180deg) translate3d(0, 0, -$cubeHeight / 2);
}

Результатом является это

Answer 2

Чтобы поместить левую грань в правильное положение, попробуйте изменить ось X на -100% в селекторе.left-flip.

translate3d(-100%, 0, $cubeHeight / 2);

Answer 3

Это закроет куб.

._3dface--left{ 
  transform: rotateY(-270deg) translate3d(0%, 0, 75px);
}

Анимировать другой способ сделать

._3dface--left{ 
  transform: rotateY(90deg) translate3d(0%, 0, 75px);
}