Páginas

▼

03 junio 2011

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


a la/s

12 comentarios:

  1. Luis Reyes6/04/2011 06:55:00 a.m.

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

    ResponderBorrar
  2. Unknown6/04/2011 09:53:00 p.m.

    Roberto Kuyosaco Kedachico, perfecto xD

    Si tienes algun problema o sugerencia, avisanos ;)!

    Saludos!

    ResponderBorrar
  3. oscar6/10/2011 02:51:00 a.m.

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

    ResponderBorrar
  4. Unknown6/12/2011 12:01:00 p.m.

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

    como has estado? hace mucho que no comentabas.

    ResponderBorrar
  5. Anónimo12/24/2011 08:05:00 a.m.

    loool mola

    ResponderBorrar
  6. Carlos Soto R.6/20/2012 07:36:00 p.m.

    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??

    ResponderBorrar
  7. Unknown9/03/2013 09:22:00 p.m.

    Olaaaaaaaaaaaaaaa

    ResponderBorrar
  8. Unknown9/03/2013 09:23:00 p.m.

    Olaaaaaaaaaaaaaaa

    ResponderBorrar
  9. Anónimo5/13/2014 03:57:00 a.m.

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

    ResponderBorrar
  10. Anónimo7/21/2014 01:10:00 p.m.

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

    ResponderBorrar
  11. Kiketrucker10/06/2014 02:47:00 p.m.

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

    Saludos.

    ResponderBorrar
  12. Anónimo4/18/2015 08:33:00 p.m.

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

    ResponderBorrar

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