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:
function miFuncionJavaScript(){
unJqueryQueApliqueElCSSQuePones...
}
Onmouseover="miFuncionJavaScript();"
o bien, si quieres hacerlo directamente por CSS (esta es la parte que no he probado) es:
.rotation:hover{
......
}
y luego en tu DIV del HTML agregarle la CLASS:
<div id="algo" class="rotacion">
...
</div>
Esto último no estoy seguro de que funcione.
Salu2
Gracias, aunque no me entiendo muy bien con JQuery, jejeje!