Greensock JS RotateX Tab experiment

[bobby kc 0 Likes (Newbie)]

Can anybody help to fix the IE10 issue (text on the panel is upside down) all other browser the tab work correctly

 

Experiment code

 

See the Pen Itswb by bobbykc13 (@bobbykc13) on CodePen

 

[Rodrigo 3,548 Likes (Superhero)]

Hi and welcome to the Greensock forums.

 

Any particular reason to rotate the parent and not the child element?. If you check this codepen you'll see that rotating the child element has the desired effect in IE10:

 

See the Pen vjGxH by rhernando (@rhernando) on CodePen

 

Also keep in mind that preserve 3D is not supported in IE10 and it won't be supported in IE11 either. Perhaps in IE12 or maybe in IE199 , but definitely not in the short term. That's why in the link's sample every child is rotated, so it can work on IE10-11.

 

Rodrigo.

[bobby kc 0 Likes (Newbie)]

Thanks for your reply, i am relatively new to greensock and 3d based animation, i will try rotating child element

[Rodrigo 3,548 Likes (Superhero)]

Hi,

 

I set up a very simple codepen. It was made with buttons and not the li elements, but is the concept of the child elements being rotated what matters. The CSS  for using li instead of buttons is pretty standard stuff and you've already got that working.

 

See the Pen qjIEn by rhernando (@rhernando) on CodePen

 

Of course it still needs some tweaking regarding specific events, for example if the user clicks on another tab while the previous is animating, you get a pretty ugly behaviour, but that can be sorted out easily.

 

Best,

Rodrigo.