Search code examples
cssrotationtransformtranslate-animation

CSS - rotate cube percentage base

I try to make a 3d rotate cube animation. I have some difficulties to make it works because I want to use percent value for front/back face.

I can't control translate position with percentage value in my case. Is there any workaround to make it works with percent value?

Here the fiddle: http://fiddle.jshell.net/5h8oLyp1/

Solution

  • Ok, so after search a lot of time I found the solutiuon (maybe the only one...). I added several wrapper in order to make it works and apply different tranlate in order to preserve a natural rotation in 3d.

    Here the fiddle: http://fiddle.jshell.net/5h8oLyp1/3/

    There just an issue with IE, I'm very close to find it but currently I don't understand why the back face is hidden...