3d Navbar That Rotates

Question

I\'m trying to create a 3d navbar using pure CSS with transforms, transitions and perspective.

Here is my code:

Answer 1

First of all, thank you to all that commented and answered to this question, especially Josh!

Josh, your example works perfectly for browsers that support preserve-3d. The update you posted without preserve-3d appears flat on IE so it was still not perfected for all browsers.

After three days of headaches, I realized the problem. The origin of the sides was not being set correctly. The sides need to rotate around a point that is half way in on the Z axis.

Once I've updated the origin to :

transform-origin: 25px 25px -25px;

Once this was correct, all you really need to do is update the rotation of the object. No need to use any transformation of the X,Y,Z coordinates.

Here's the fiddle and the solution for a 3D Navigation bar that rotates and works for all browsers including IE10+.

http://jsfiddle.net/tx0emcxe/