Para dar dinamismo a nuestras páginas web vamos a ver como se crean transiciones usando la tecnología de CSS3.

Podemos ver en este ejemplo si estáis usando las últimas versiones de navegadores como Firefox, Chrome o Safari.

Para empezar vamos a ver el código HTML que he usado para la creación de este menú social con esta transición y que da un efecto de rotación a las imágenes usadas.

Para implementarlo se ha usado imágenes de fondo y se ha ocultado el texto que se encuentra entre las etiquetas <span>:

<ul> 
 <li><a href="#" id="boton-skype" title="Skype"><span>Skype</span></a></li>     
 <li><a href="#" id="boton-google" title="Google profile"><span>Google Buzz</span></a></li>                    
 <li><a href="#" id="boton-twitter" title="Twitter profile"><span>Twitter</span></a></li>         
 <li><a href="#" id="boton-picasa" title="Picasa"><span>Picasa</span></a></li>               
 </ul>

Podemos apreciar que hemos creado un CLASS ya que los botones compartirán estilos. También hemos añadido un ID a cada botón para que podamos asignarle mediante la propiedad background de  CSS la imagen que le corresponda. Ahora que ya tenemos el código HTML vamos a ver los estilos CSS necesarios para crear este efecto:

ul li{
 display: inline;	
}
ul li a{
 position: relative;
 display: block;
 float: left;
 width: 19px;
 height: 19px;
 margin-left: 1em;
}
ul li a span{
 position: absolute;
 right: -999em;
 font-size: 0;
}
#boton-twitter{
 background: url(../img/ico_twitter.gif) no-repeat top left;    
}
#boton-picasa{
 background: url(../img/ico_picasa.gif) no-repeat top left;    
}
#boton-google{
 background: url(../img/ico_google.gif) no-repeat top left;    
}
#boton-skype{
 background: url(../img/ico_skype.gif) no-repeat top left;    
}
a.opcion:hover{
 -moz-transition: background .3s ease 0s;
 -webkit-transition: background .3s ease 0s;
 -o-transition: background .3s ease 0s;
 -ms-transition: background .3s ease 0s;
 transition: background .3s ease 0s;	     
 background-position: bottom left !important;
}

Como podemos apreciar en el código, es en la pseudo-clase :HOVER donde usamos la transición, a la que asignamos la propiedad background.

transition-property: background;

Luego asignamos el tiempo de duración y le indicamos que no tendrá retardo (delay) a la hora de aplicar dicha transición.  En esta pseudo-clase aparece la propiedad background-position indicando que cambiará la posición de la imagen de fondo cuando el usuario se sitúe con el ratón encima del enlace:

transition-duration: .3s;
transition-delay: 0s;

Las imágenes de los iconos usados son dobles,  es decir, que una misma imagen está dividida en dos para cada icono. En posición normal solo se muestra la parte superior de la imagen, y cuando el usuario se posiciona encima del icono, muestra la parte inferior de esa misma imagen. En este caso la diferencia de la parte superior e inferior es el color del icono.