Reproducir la transformación css3 con jquery

hola ¿alguien me puede mostrar ho para reproducir este efecto css3 con jquery usando alguna velocidad de demora/animación?Reproducir la transformación css3 con jquery

.element:hover{ 
-moz-transform: scale(1.3) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg); 
-webkit-transform: scale(1.3) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg); 
-o-transform: scale(1.3) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg); 
-ms-transform: scale(1.3) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg); 
transform: scale(1.3) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg); 
z-index:9999; 

}

JSFIDDLE

Fuente

2011-09-08 sbaaaang

no se trata simplemente de escalar la anchura y la altura del elemento? –

http://jsfiddle.net/2xWXY/ – sbaaaang

Aquí hay algo BONITO cerca de lo que está preguntando. Estoy seguro de que podría ajustar a su gusto

$('.element').hover(function(){ 

    $(this).css('position','relative').animate({ 
     height: $(this).height()*1.3, 
     width: $(this).width()*1.3, 
     left: '-=' + $(this).width() /4, 
     top: '-=' + $(this).height() /4, 
     'fontSize': $('.element').css('fontSize').substring(0,$('.element').css('fontSize').length -2) * 1.3 + 'px' 
    },'fast'); 
}, 
function() {     
     $(this).css('position','relative').animate({ 
     height: $(this).height()/1.3, 
     width: $(this).width()/1.3, 
     left: 0, 
     top: 0, 
     'fontSize': $('.element').css('fontSize').substring(0,$('.element').css('fontSize').length -2)/1.3 + 'px' 
    },'fast'); 
}    

);

http://jsfiddle.net/dTkhM/2/

Fuente

2011-09-08 14:13:35

uhmmm ... intenta pasar mucho tiempo recursivamente pasando el mouse y el mouse: P – sbaaaang

Dije que no es perfecto ¿no? El problema es que cuando cambias el ancho y alto del div, se escala desde la esquina superior izquierda, y no desde la mitad, como con la transformación css3. Para arreglar esto tuve que meterme con cambiar las propiedades TOP e IZQUIERDA, pero no sé cuáles deberían ser los valores correctos para ellos. El otro problema es que no estoy seguro de lo que CSS hace con los valores decimales, como font-size: 13.313452px, por ejemplo. –

sí, no fue ofensivove mi tono;) fue solo para decir que su código es bastante perfecto, pero no puedo aceptar la respuesta a causa de ese pequeño error;) – sbaaaang

Así es como yo podría ir sobre la implementación de una simple rotación (no tomar la velocidad de fotogramas en cuenta):

$(function(){ 
    (function(n){ 
     this.interval = n; 
     this.transform = { 
      'rotation': 0 
     }; 

     this.start = function(){ 
      setInterval(this.update, this.interval); 
     }; 

     this.update = function(){ 
      this.transform['rotation'] = (this.transform.rotation + 10) % 360; 
      $('div').css('transform', 'rotate(' + this.transform.rotation + 'deg)'); 
     }; 
     return this; 
    })(30).start(); 
});

http://jsfiddle.net/dbrecht/82aUL/1/

Esto demuestra una animación simple. Debería ser capaz de descubrir cómo juntar el resto.

Fuente

2011-09-08 01:35:27

ehm ..: P ... no sé, pero para mí ese código no funciona en jsfiddle :( – sbaaaang

Es cromo solo atm –

sí, p: brian respuesta es definitiva ;) – sbaaaang

Reproducir la transformación css3 con jquery

Respuesta

Cuestiones relacionadas