Bello efecto con solo propiedades CSS3 y Sprites

Tweet

Una de los mejore efectos visuales que he visto este último tiempo fue el puesto por InspectElement.com, el cual hace un efecto elegante que hace girar los iconos de menú o redes sociales (como lo haré en el ejemplo a continuación) con la ayuda de una transformación CSS y de la transición cuando se pasa sobre ellos (la propiedad llamada hover). Nada espectacular, pero sin duda una mejora para nuestros diseños y sin la necesidad de cargar un JavaScript externo o el uso de Flash.

» Primer paso: Guardar la imagen

Lo primero que debemos hacer es guardar esta imagen que esta en formato .PNG en nuestro servidor o en la carpeta que deseamos.

» Segundo paso: El Código HTML de la Página

<div id="container">
  <h1>Las Redes Sociales</h1>

	<ul>
		<li class="twitter"><a href="http://twitter.com/tkenny"><span>twitter</span></a></li>
		<li class="dribbble"><a href="http://dribbble.com/tkenny"><span>dribbble</span></a></li>
		<li class="lastfm"><a href="http://www.last.fm/user/KennySim"><span>last.fm</span></a></li>
		<li class="spotify"><a href="http://open.spotify.com/user/tkenny"><span>Spotify</span></a></li>
		<li class="ember"><a href="http://emberapp.com/tkenny/"><span>ember</span></a></li>
		<li class="inspectelement"><a href="http://inspectelement.com/"><span>Inspect Element</span></a></li>
	</ul>
</div>

» Tercer paso: Aplicando el CSS3

Aquí está la CSS centrarse sólo en el código que realizan las transiciones, atención que en esta parte ocupamos Sprites (como lo hace el menú de este blog, si realmente no sabes que es un Sprite, te recomiendo visitar el sitio web de Tinnta.com y leer el tutorial desarrollado por ellos.

	body {
		background: #fff url(http://www.reckless.cl/Blog/wp-content/themes/RKS/img/background.png);
		text-align: center;
		margin-top: 25px;
		color: #1c3a51;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-weight: normal;
		line-height: 22px;
	}
	h1 {
		font-family: Verdana, Arial, Helvetica, sans-serif;
		margin: 45px 0 75px;
		font-weight: bold;
	}
	#container {
	width: 960px;
	padding: 0px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	}	

	ul {
	width: 145px; margin: 0 auto; list-style: none; font-size: 0px;
	}
	li a {
	background: url(sprite.png) no-repeat;
	background-position: -55px 0;
	display: block;
	text-indent: -9999px;
	margin-top: 15px;
	}
	li a span {
		background: url(sprite.png) no-repeat;
		display: block;
		width: 30px;
		height: 32px;
		position: relative;
		z-index: 10;
		-webkit-transition: -webkit-transform 0.4s ease-out;
		-moz-transition: -moz-transform 0.4s ease-out;
		transition: transform 0.4s ease-out;
	}
	li a:hover span {
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		transform: rotate(360deg);
	}

	li.twitter a { background-position: -55px 0; width: 127px; height: 32px; }
	li.twitter a span { background-position: 0 0; }

	li.dribbble a { background-position: -55px -50px; width: 113px; height: 32px; }
	li.dribbble a span { background-position: 0 -50px; }

	li.lastfm a { background-position: -55px -100px; width: 107px; height: 32px; }
	li.lastfm a span { background-position: 0 -100px; }

	li.spotify a { background-position: -55px -150px; width: 98px; height: 32px; }
	li.spotify a span { background-position: 0 -150px; }

	li.ember a { background-position: -55px -200px; width: 119px; height: 32px; }
	li.ember a span { background-position: 0 -200px; }

	li.inspectelement a { background-position: -55px -250px; width: 144px; height: 32px; }
	li.inspectelement a span { background-position: 0 -250px; }

Listo… explicare en mayor detalle como funciona lo siguiente:

li a span {
-webkit-transition: -webkit-transform 0.4s ease-out;
-moz-transition: -moz-transform 0.4s ease-out;
transition: transform 0.4s ease-out;
}
li a:hover span {
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}

La etique Span es la que hace el efecto, por ende todo la etiqueta <span> es la afectada al pasar el mouse (como dijimos actua como sprite con un hover). La primera parte de la propiedad “transition” es la duración y la facilidad de salida es la función de temporización. Es decir “0.4s” son los segundos que dura la transición para dar la vuelta en 360 grados, como es eso de los 360 grados lo explico a continuación.

Veamos el código de “transform” primero. Se trata de poner fin a la posición de donde queremos que el icono que se va y en este caso es que realmente quieren girar en 360 grados alrededor del eje Z que es el eje que se extiende fuera de la pantalla.

Sin la transición, nada parece estar sucediendo. Rotación de 360 grados, obviamente, va a hacer que el icono de venir “círculo completo”, visualmente de nuevo a la misma posición que comenzó desde el navegador.El punto de partida predeterminado para la rotación es de 0 grados y el segundo punto en hover es de 360.