Foro de elhacker.net

El caso es que me gustaría que hubiera un recuadro que cuando pasaras el cursor por encima se ejecutara esta animación en CSS.

.rotacion {
-webkit-animation: cssAnimation 2.5207s 16 ease;
-moz-animation: cssAnimation 2.5207s 16 ease;
-o-animation: cssAnimation 2.5207s 16 ease;
}
@-webkit-keyframes cssAnimation {
from { -webkit-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
to { -webkit-transform: rotate(360deg) scale(1) skew(1deg) translate(0px); }
}
@-moz-keyframes cssAnimation {
from { -moz-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
to { -moz-transform: rotate(360deg) scale(1) skew(1deg) translate(0px); }
}
@-o-keyframes cssAnimation {
from { -o-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
to { -o-transform: rotate(360deg) scale(1) skew(1deg) translate(0px); }
}

¿Tentria que poner

onmouseover=" "

o como?




Un saludo y gracias por leer!!  ;D

Hola,

Te respondo sin haber hecho las pruebas con tu código, pero la idea está ahí.

Onmouseover lo que hace es permitirte hacer una llamada a una función o instrucciones de javascript en el momento de pasar el cursor por el elemento.

Tu quieres hacer un efecto mediante CSS y no mediante javascript. Por lo tanto hay varias posibilidades:


o bien, si quieres hacerlo directamente por CSS (esta es la parte que no he probado) es:


y luego en tu DIV del HTML agregarle la CLASS:


Esto último no estoy seguro de que funcione.

Salu2

Gracias, aunque no me entiendo muy bien con JQuery, jejeje!