Hacker of the Web
Tus ideas en código!...y mas

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.

CSS3 rotar elementos

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:

twitter facebook

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>:
.rotateMe {
 -webkit-transition: -webkit-transform 1s ease-out;
 -moz-transition: -moz-transform 1s ease-out;
 transition: transform 1s ease-out;
}
.rotateMe:hover {
 -webkit-transform: rotate(360deg);
 -moz-transform: rotate(360deg);
 transform: rotate(360deg);
}
Ahora donde quieras agregar el efecto, solo modifica el elemento de la manera:
Antes
<a href='http://google.com'>Texto que rota!</a>
<img src='http://ejemplo.com/imagen_que_rota.jpg' />
Despues
<a class='rotateMe' href='http://google.com'>Texto que rota!</a>
<img class='rotateMe' src='http://ejemplo.com/imagen_que_rota.jpg' />
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:

banner

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

IMAGEN | DreamsTime.com


#

Deja tu huella y comenta!

Hola!, por favor deja tus comentarios, te aseguro serán contestados, dudas, sugerencias, lo que sea!!!!!!!!!!.

Si el formulario no funciona, o quieres irte a la segura: agrega tu comentario de forma tradicional

Si necesitas ayuda mas personalizada deja un <a href='URL'>ENLACE</a> hacia tu blog.

Emoticons
Comenta con tu:
Comenta:

12 comentarios !

Luis Reyes dijo...

Estupendo efecto, me parece genial, voy a probarlo ahora mismo.

Unknown dijo...

Roberto Kuyosaco Kedachico, perfecto xD

Si tienes algun problema o sugerencia, avisanos ;)!

Saludos!

oscar dijo...

excelente aporte amigo, como siempre te luces con nuevas innovaciones para tu publico
lo estoy llevando mi blog gracias.

Unknown dijo...

oscar, de nada :P. Si tienes problemas avísame!

como has estado? hace mucho que no comentabas.

Anónimo dijo...

loool mola

Carlos Soto R. dijo...

mmm como lo hago si quiero rotar una imagen rápido y en 360º y otra en 45º y más lento...lo pregunto porque nosé si hay que poner dos códigos de rotateme??? no se genera conflicto?? como lo hiciste tu??

Unknown dijo...

Olaaaaaaaaaaaaaaa

Unknown dijo...

Olaaaaaaaaaaaaaaa

Anónimo dijo...

Muchas gracias por el código, me ha ayudado mucho.

Anónimo dijo...

Que util fue... Grasias :D xD ;)

Kiketrucker dijo...

Gracias por el código, ya lo tengo aplicado a los iconos de redes sociales.

Saludos.

Anónimo dijo...

hola, estupendo articulo. me a servido mucho, una pregunta como podria hacer para que girara al sentido contrario? gracias.


Página Principal
Arriba