Llamar a una " class " con javascript.

[Ori-chan]

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.

Código (ada) [Seleccionar] Expandir

.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

Código (lenguage) [Seleccionar] Expandir

onmouseover=" "

o como?




Un saludo y gracias por leer!! 

[RevangelyonX]

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:

Código [Seleccionar] Expandir

function miFuncionJavaScript(){
  unJqueryQueApliqueElCSSQuePones...
}

Onmouseover="miFuncionJavaScript();"

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

Código [Seleccionar] Expandir


.rotation:hover{
  ......
}


y luego en tu DIV del HTML agregarle la CLASS:

Código [Seleccionar] Expandir

<div id="algo" class="rotacion">
...
</div>

Esto último no estoy seguro de que funcione.

Salu2

[Ori-chan]

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