Rotación mediante CSS3 / Webkit

Hace un tiempo estuve viendo el proyecto Stampaxx, una buena colección de sellos para indicar de que va tu proyecto. Me pareció una idea genial, un diseño super cuidado y encima gratis. Me gustó tanto que decidí echar un vistazo a los autores: Thomas y Mike

La web de Thomas un sencillo carrousel con sus proyectos, sencilla y atractiva, genial. Pero lo que me llamó la atención fue algo que ví en la web de Mike. Yo navego siempre con Chrome y me impactó un montón cuando, al pasar el ratón por el logo de acceso a twitter, este giraba 180 grados. Me puse a investigar y vi que lo hacía mediante CSS, así que intenté hacerlo con mi logo…

Primero lo que hay que hacer es cargar el logo con un background en lugar de cargar la imagen desde html:

y luego indicarle a los navegadores webkit la rotación que tienen que hacer y cuando la tienen que hacer:

Esto funciona en mi caso teniendo el logo de esta forma en mi código html

Esto, evidentemente va contra todos mis principios de validación de código ya que esto solo vale para navegadores webkit, pero es que queda tan chulo…

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *