transform-origin help

[caemostajo]

Hi super coders!

I really need some help from you guys, i've been trying for hours with no positive results so i finally decided to post it here.

In my pen, there are 2 buttons to run the animation, right now it is using CSS transforms & transitions but will have gsap as i will animate the cube with some infographics to. Right now I just want to have the basic parts done.

Ok! so i have 2 problems:
1) the left face of the cube is not in the right place, i need to place it in its respective space and to have the same animation it has right now. I want it exactly like this: http://www.f-lohmueller.de/pov_tut/backgrnd/im/CubeMappingWrapping_1d_64.gif

2) all the faces have inner and outer images, when the front face opens the image has some flickering (the outer image is shown when the inner image has to be seen)

Bets of bests and thanks in advance!
~cm

See the Pen yORNvx?editors=1100 by caemostajo (@caemostajo) on CodePen

[PointC]

Hi caemostajo 

 

Since you're planning on changing the animation over to GSAP anyway, I'd ask that you please do that first so we can better assist you with GreenSock related problems. There are probably some around here that would troubleshoot a CSS animation, but I'm not one of them - that syntax gives me a headache.   

 

As far as 3D cubes go, we had a pretty good discussion that might help you over here:

http://greensock.com/forums/topic/13399-rotationx-doesnt-fit-like-rotationy-rotationz-in-my-3d-cube-test/

 

Jonathan may chime in here too. He's the resident 3D cube expert. 

 

Happy tweening.