Rotated navigation with CSS3 only

Can not support Ie

Here’s a last small technique that works with CSS3 (Supported by the latest versions of Firefox, Safari and Chrome). When hovering a block element, you’ll get a rotated hover state. Might not be that useful, but it can be beautiful to see.

 

HTML

CSS

/* LIST #8 */
#list8 {  }
#list8 ul { list-style:none; }
#list8 ul li { font-family:Georgia,serif,Times; font-size:18px; }
#list8 ul li a { display:block; width:300px; height:28px; background-color:#333; border-left:5px solid #222; border-right:5px solid #222; padding-left:10px;
text-decoration:none; color:#bfe1f1; }
#list8 ul li a:hover {  -moz-transform:rotate(-5deg); -moz-box-shadow:10px 10px 20px #000000;
-webkit-transform:rotate(-5deg); -webkit-box-shadow:10px 10px 20px #000000;
transform:rotate(-5deg); box-shadow:10px 10px 20px #000000; }

Download: http://www.htmldrive.net/items/download/192

Leave a comment