3d cube face rotation transform-origin misplaced

Question

I have this 3d cube: http://codepen.io/caemostajo/pen/yORNvx/ , the front and left faces open when click on the 2nd button.

As you can see the left face is misplaced, i can't place it where it belongs mantaining its open animation. it should look like this: http://www.f-lohmueller.de/pov_tut/backgrnd/im/CubeMappingWrapping_1d_64.gif

i have been trying with diferent translate3D and transform-origin values but no luck, think the problem is with the transform-origin of that face when the button is clicked.

I hope someone can help... best of bests!

score 0 · Answer 1 · answered Apr 28 '16 at 01:35

0

To place the left face in the right position try to change the x-axis to -100% in .left-flip selector.

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

answered Apr 28 '16 at 01:35

Suma Chaganti

165
1
9

Thanks for the response! It does locate the face in its place but once you click to animate and open the faces the rotation changes. It should open the faces like this: http://www.f-lohmueller.de/pov_tut/backgrnd/im/CubeMappingWrapping_1d_64.gif – Cae Mostajo Apr 28 '16 at 01:57
i'm struggling so hard with this one, i've been changing the translate3D and transform-origin values so many times to make it work with no luck... and i'm sure that it is not that difficult. 3d transforms Gurus! i need you guys! =D – Cae Mostajo Apr 28 '16 at 02:01

score 0 · Answer 2 · answered Apr 28 '16 at 04:32

0

This will close the cube.

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

To animate the other way do

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

answered Apr 28 '16 at 04:32

hostingutilities.com

8,894
3
41
51

score 0 · Answer 3 · answered Apr 28 '16 at 17:02

I have changed:

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

and

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

The result is this

3d cube face rotation transform-origin misplaced

3 Answers3