Jump to content

Search In
  • More options...
Find results that contain...
Find results in...
bobby kc

Greensock JS RotateX Tab experiment

Recommended Posts

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


Link to post
Share on other sites

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.



  • Like 1
Link to post
Share on other sites

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

Link to post
Share on other sites



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.




Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.