CSS3: Rotar/Girar elementos al pasar mouse o raton

Alguna vez en toda tu vida de webmaster o diseñador web, ¿te imaginaste que algún día podrías utilizar CSS para crear una animación?. Yo tampoco(si la respuesta fue no xD) pero ahora es posible, gracias a CSS3 y a sus nuevas características podemos fácilmente prescindir de flash u otras tecnologías.

El CSS desde la llegada de su tercera versión, ha dejado de ser unas simples reglas para modificar la apariencia de elementos web, a ser un complejo lenguaje de diseño y animación web y aquí en santyweb nos estamos volviendo locos con estas nuevas funcionalidades que estan por aparecer masivamente en la web 3.0

Bien, basta de preambulos.

El efecto es el siguiente:

Que te parece, es un tanto apantallante ¿no?. Bueno para agregarlo en donde quieras, solo necesitas:

[1] Entrar en Diseño>Edicion HTML>Sin expandir plantillas de artilugios

[2] Buscar con 'Ctrl+F': ]]></b:skin>

[3] Y agregar el siguiente código justo antes de ]]></b:skin>:
Ahora donde quieras agregar el efecto, solo modifica el elemento de la manera:

Antes

Despues

Una cosa mas, si eres avanzado en CSS o te crees lo suficientemente valiente, puedes modificar el código, un poco:

1s, es el tiempo que dura para rotar el elemento. Puedes modificar los segundos que tarda.

360deg, son los grados que gira el elemento: 360 es una vuelta entera, 180 es media.

Si lo modificamos un poco, podemos rotar un tanto menos las imágenes grandes. Como este banner nuevo que acabamos de diseñar:

Todo queda en tu imaginación, solo es cuestión de jugar un poco con los valores de las propiedades. Suerte!

IMAGEN | DreamsTime.com