Subscribe by Email

Today we’re going to be making this pretty cool rotating box effect menu. It will degrade in browsers which do not support 3D transforms to just a regular menu and will therefore work in the latest stable releases of all major browsers and the developers release of chrome.

3D Transforms

To accomplish this effect we need to create a 3D object. For that reason, each list item will have an anchor, in which is contained 4 spans. Each span represents the sides of of a cuboid. We don’t really need the two extra sides that make up the cuboid since we’re only going to be looking at it from the front. We’ll position each span in the right position. I’ve also included some sub menus by adding extra list elements within each li tag.

I’m going to be using the Symbolset icon font to create the down arrows (That’s what the <i> tags are). It’s pretty cheap, and I’d highly recommend it, however there are other ways to accomplish down arrows and this is not necessary. If you’re not using symbolset then just remove the <i> tags.

CSS Time!

3D Transforms are only fully supported by webkit browsers which according to statcounter make up about 39% of the market. Firefox supports 3D transforms but the implementation is slightly different, and therefore it doesn’t really look as good as it does in webkit browsers. To tackle this lack of support we’re using 4 spans. The first span will be the default state, the second will be the hover or current state, the third will be the hover state for the current link, and the 4th will be used for browsers with no 3D support.

We’re going to move the spans around until we form a cube, which in 3D space will look a little like this:

We begin by setting the perspective and some other CSS properties for the main menu tag.

Next we have to set the li elements to preserve 3D mode so they can be manipulated as 3D objects. We also need to set transitions so that everything will run smoothly on hover. The rest is just regular old CSS.

Next is the difficult part, positioning each span in the correct place. Much of this was trial and error, and of course the values will change depending on what size you wish the menu elements to be. I’ve also added the styles for the ‘current’ menu item. Instead of changing the color, I just rotated the object so that the background was a different color!

Next we have to set what happens on hover. When the user hovers over the li elements we want them to rotate. We’ll also have to do a little repositioning to ensure everything goes in the right place. We also need to set what happens when the user hovers over the 4th span (it will just act like a normal menu).

The final step is to make the drop down menus work. These are optional and the menu will function better without them, however I thought it’d be good to show you exactly how to implement them. Since the initial rotating animation lasts 0.3 seconds, we want to delay the drop downs from appearing for 0.3 seconds to ensure everything runs smoothly. Things get a little complicated with 3D transforms, and since we cant use displays with transitions, we need to set opacity of the drop downs to 0. This has the unfortunate side effect of showing when the user hovers below the menu. We can’t really prevent this in browsers without 3D support, but in most cases it won’t be a huge deal. To tackle it in browsers with 3D support, we just rotate the sub menus so they become unclickable.

After the user hovers over the main li element, the sub menus rotate back into position and fade in. I also had to do a quick resize of a menu element so everything fitted correctly.

And we’re done! As a quick note, I had to implement the firefox declarations slightly differently because firefox (for some reason) didn’t implement the specification in the same way as webkit. I assumed webkit was implementing it correctly since they are the main driving force behind the 3D transform specification. However, should Firefox change its implementation in the future (likely), you would have to change the firefox transforms to suit. I hope you’ve enjoyed this tutorial! Check out the demo or download below.

While we’re talking about browser compatibility, I would like to bring up the issue of Google Chrome. It seems the latest version of webkit has altered the 3D transforms, so this demo will not work in regular Google Chrome. It will however work in the developers build. This is down to the fact that the developers build has the latest version of webkit. So the drop downs won’t really work in regular chrome. We can probably expect in a week or two for this demo to work perfectly with chrome when they release a new version.

So from my experimenting, I found that the implementation of the 3D spec in regular chrome is a lot closer to the Firefox implementation. You should be able to use the Firefox implementation for regular chrome. However, I’m using beta chrome at the minute and it’s using the newest implementation. Basically, don’t be too hasty to change the CSS to fit the current version of chrome, because it looks like it will be updated very soon.