Menú vertical CSS3 con rotación al hacer hover

En está entrada veremos un menú vertical realizado con CSS3 que al hacer hover o al pasar el cursor por encima del menú, tiene un efecto de rotación. Es un menú bastante bonito y sencillo a la misma vez, que pueden usarlo o utilizarlo para añadir enlaces o etiquetas en vuestro blog de Blogger, por ejemplo. Es indicado añadir dicho menú en la sidebar o columna lateral o también en el footer, mediante la implantación que nos ofrece Blogger: Añadir un Gadget y luego HTML & Javascript, así de fácil. A continuación veremos el menú en modo de ejemplo para que podáis ver el efecto y el diseño del menú, si os gusta, ya sabéis, agregarlo en vuestro blog, vamos allá con el ejemplo en vivo y en directo, lo puedes ver seguidamente:

Ahora vamos ha añadir el código mediante un gadget

<style type="text/css">
/* Css3 menú vertical */
#css3menu {  }
#css3menu ul { 
list-style: none; 
}
#css3menu ul li { 
font-family: Georgia, serif, Times; /* Tipo de fuente */
font-size: 18px; /* Tamaño de la fuente */
}
#css3menu ul li a {
 display:block; 
 width: 300px; /* Ancho del menú */
 height: 28px; /* Alto del menú */
 background-color: #333; /* Color del fondo */
 border-left: 5px solid #222; /* Bordes */
 border-right: 5px solid #222;
 padding-left: 10px;
 text-decoration: none; 
 color: #bfe1f1; /* Color de la fuente */
}
#css3menu ul li a:hover {  
-moz-transform:rotate(-5deg); /* Efecto rotación */
-moz-box-shadow:10px 10px 20px #000000; /* Sombras */
-webkit-transform:rotate(-5deg); /* Efecto rotación */
-webkit-box-shadow:10px 10px 20px #000000; /* Sombras */
 transform:rotate(-5deg); /* Efecto rotación */
 box-shadow:10px 10px 20px #000000; /* Sombras */
}
</style>


<div id="css3menu">
   <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Sobre mí</a></li>
      <li><a href="#">Contacto</a></li>
   </ul>
</div>

Por último sólo te queda remplazar las # pertinentes, por el enlace o link que desees, también cambia el nombre de cada enlace por el tuyo en el código HTML de la parte inferior del código anterior. Y además he resaltado con texto en el código CSS los cambios que puedes realizar, para personalizar el menú a tu gusto, espero que os guste, hasta otra.