Author: Ryan Tvenge

With the adoption of Webkit browsers (Chrome, Safari and just about every mobile browser), It’s getting easier to use Webkit-specific CSS3. This idea came when I was looking at Chris Coyier’s CSS Tricks site. He was using some 3D css3 on some of his sponsors links. I thought this would be a good implementation on a navigation.

The html is a straightforward linked unordered list:

• Home
• Contact
• Me
• Resume
• Work

For the CSS, we are using:

#nav { list-style: none; padding: 0; }
#nav li { display: block; float: left; }
#nav li:hover a, #nav li:focus a, #nav li.current_page_item a { -webkit-transform: rotateY(360deg); background: #fffd8c; color: #005488; }
#nav li a { display: block; padding: 11px 10px 9px; margin-right: 2px; color: #ff7a7a; text-decoration: none; text-transform: lowercase;
	/* css3 */-moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px;
	/* css3 */-webkit-perspective: 700;-webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden; -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out;
}

This could will work for the most part, but there is some instances that I’ve only been able to replicate on a Mac machine. When you hover over the link and stop before the animation is complete, the browser doesn’t know that you are hovered over the anchor. There is a quick jQuery fix for this:

$('#nav li')
	//Indicate to user that the

• is now clickable
  .css(‘cursor’,’pointer’)
  //Trigger click on anchor when clicking
• .click(function () {
  $(this).find(‘> a’).trigger(‘click’);

Now your navigation will have a sweet new CSS3 transition to it.

demo // download