Is this possible? (Vertical flip animation with jQuery)

[MythicaL]

I have a navigation bar in the header area of a site I am developing:

http://i.imgur.com/w6eHp.png

My question is: is it possible to vertically flip (meaning an animation is required) that navbar when the far right button is clicked, essentially exposing the back side? The navigation bar contains a background image that must be transformed in order to create the illusion of vertical flipping. The end result of the animation would consist of additional navigation elements, like Nav Item 5, Nav Item 6, etc. that are displayed as if the user was looking at the other side.

From what I have researched, what I want is only possible with 3D transforms in CSS, and only Safari, Chrome, and the recently released Firefox 10 support it. But is there another way? Plugins like "Flip!" (http://lab.smashup.it/flip) don't seem to transform the background image as I expect.

Would I be much better off skipping the flip and having some sort of fade transition between displaying Nav Items 1-4 and Nav Items 5+?

Thank you.

[MattehCarter]

I'm not sure if you can achieve this effect in jQuery, but it can definitely be done in CSS3

http://css3playground.com/flip-card.php

If I were you, I would start developing in CSS3 to stay ahead of the game. Lots of people use Chrome, Opera, Firefox and Safari which should all support this feature. Internet Explorer is pretty much becoming obsolete.

Also, jQuery animations will eventually be ruled out, seen as though to create these effects with CSS3 you only need to use a few lines of code.

I know this isn't what you asked for, but hopefully it helped some what.

[Seahorsepip Veteran]

it's possible trough css3 and js both ways but css3 is smoother and if you want to go crazy you have to use flash :p

[MythicaL]

Thanks guys. I guess what I could do for now is (if I /really/ needed it) enable the native CSS3 effect in browsers that support it, and revert to jQuery's fadeIn/fadeOut effect for the elements inside the nav for browsers that don't support it. I did consider Flash, but it ultimately came down to not knowing much about ActionScript and not really being a fan of Flash altogether.

I haven't looked into when Opera will be supporting 3D transforms, but I hope it's soon. I'll be watching this very closely: http://caniuse.com/transforms3d