3d cube лицо вращение трансформация-происхождение неуместно

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, но не повезло, подумайте, что проблема связана с трансформационным происхождением этого лица при нажатии кнопки.

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

Answer 1

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

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

Answer 2

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

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

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

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

Answer 3

Я изменился:

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

В результате this