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:
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.
