Animate element transform gire

Como eu giraria um elemento com o .animate() um jQuery? Eu estou usando a linha abaixo, que atualmente está animando a opacidade corretamente, mas isso suporta CSS3 transforma?

 $(element).animate({ opacity: 0.25, MozTransform: 'rotate(-' + -amount + 'deg)', transform: 'rotate(' + -amount + 'deg)' }); 

    Até onde sei, animates básicos não podem animar propriedades CSS não numéricas.

    Eu acredito que você poderia fazer isso usando uma function de etapa e a transformação css3 apropriada para o navegador do usuário. Transformar CSS3 é um pouco complicado para cobrir todos os seus navegadores (IE6 você precisa usar o filtro Matrix, por exemplo).

    EDIT : aqui está um exemplo que funciona em navegadores webkit (Chrome, Safari): http://jsfiddle.net/ryleyb/ERRmd/

    Se você quisesse suportar somente o IE9, você poderia usar transform vez de -webkit-transform , ou -moz-transform suportaria o FireFox.

    O truque usado é animar uma propriedade CSS que não nos interessa ( text-indent ) e, em seguida, usar seu valor em uma function de etapa para fazer a rotação:

     $('#foo').animate( .. step: function(now,fx) { $(this).css('-webkit-transform','rotate('+now+'deg)'); } ... 

    A resposta de Ryley é ótima, mas tenho texto dentro do elemento. Para girar o texto junto com todo o resto, usei a propriedade de espaçamento de borda em vez de recuo de texto.

    Além disso, para esclarecer um pouco, no estilo do elemento, defina seu valor inicial:

     #foo { border-spacing: 0px; } 

    Então, no pedaço animado, seu valor final:

     $('#foo').animate({ borderSpacing: -90 }, { step: function(now,fx) { $(this).css('transform','rotate('+now+'deg)'); }, duration:'slow' },'linear'); 

    No meu caso, gira 90 graus no sentido anti-horário.

    Aqui está a demonstração ao vivo .

    Na minha opinião, o animate do jQuery é um pouco usado, comparado com a transition do CSS3, que realiza essa animação em qualquer propriedade 2D ou 3D. Também tenho medo, que deixar isso para o navegador e esquecer a camada chamada JavaScript poderia levar a um sumo extra de CPU – especialmente, quando você deseja explodir com as animações. Assim, gosto de ter animações onde as definições de estilo são, desde que você defina funcionalidade com JavaScript . Quanto mais apresentações você injetar no JavaScript, mais problemas você enfrentará mais tarde.

    Tudo o que você precisa fazer é usar addClass no elemento que deseja animar, onde você define uma class que tenha propriedades de transition CSS. Você apenas “ativa” a animação , que fica implementada na camada de apresentação pura .

    .js

     // with jQuery $("#element").addClass("Animate"); // without jQuery library document.getElementById("element").className += "Animate"; 

    Pode-se facilmente remover uma class com jQuery , ou remover uma class sem biblioteca .

    .css

     #element{ color : white; } #element.Animate{ transition : .4s linear; color : red; /** * Not that ugly as the JavaScript approach. * Easy to maintain, the most portable solution. */ -webkit-transform : rotate(90deg); } 

    .html

      Text  

    Esta é uma solução rápida e conveniente para a maioria dos casos de uso.

    Eu também uso isso quando quero implementar um estilo diferente (propriedades CSS alternativas) e desejo alterar o estilo on-the-fly com uma animação global .5s. Eu adiciono uma nova class ao BODY , enquanto tenho CSS alternativo em uma forma como esta:

    .js

     $("BODY").addClass("Alternative"); 

    .css

     BODY.Alternative #element{ color : blue; transition : .5s linear; } 

    Dessa forma, você pode aplicar estilos diferentes com animações, sem carregar arquivos CSS diferentes. Você envolve apenas JavaScript para definir uma class .

    Para adicionar as respostas de Ryley e atonyc, você não precisa usar uma propriedade CSS real, como text-index ou border-spacing , mas pode especificar uma propriedade CSS falsa, como rotation ou my-awesome-property . Pode ser uma boa ideia usar algo que não corre o risco de se tornar uma propriedade CSS real no futuro.

    Além disso, alguém perguntou como animar outras coisas ao mesmo tempo. Isso pode ser feito normalmente, mas lembre-se de que a function de step é chamada para todas as propriedades animadas, portanto, você precisará verificar sua propriedade da seguinte forma:

     $('#foo').animate( { opacity: 0.5, width: "100px", height: "100px", myRotationProperty: 45 }, { step: function(now, tween) { if (tween.prop === "myRotationProperty") { $(this).css('-webkit-transform','rotate('+now+'deg)'); $(this).css('-moz-transform','rotate('+now+'deg)'); // add Opera, MS etc. variants $(this).css('transform','rotate('+now+'deg)'); } } }); 

    (Nota: Não consigo encontrar a documentação para o object “Tween” na documentação do jQuery; a partir da página de documentação do animate há um link para http://api.jquery.com/Types#Tween que é uma seção que não parece existir. Você pode encontrar o código para o protótipo Tween no Github aqui ).

    Apenas use transições CSS:

     $(element).css( { transition: "transform 0.5s", transform: "rotate(" + amount + "deg)" } ); setTimeout( function() { $(element).css( { transition: "none" } ) }, 500 ); 

    Como exemplo, configurei a duração da animação para 0,5 segundo.

    Observe o setTimeout para remover a propriedade css de transition após o término da animação (500 ms)


    Por questões de legibilidade, omiti prefixos de fornecedores.

    Esta solução requer suporte de transição do navegador fora do curso.

    Eu tropecei neste post, olhando para usar CSS transformar em jQuery para uma animação de loop infinito. Este funcionou bem para mim. Eu não sei o quão profissional é.

     function progressAnim(e) { var ang = 0; setInterval(function () { ang += 3; e.css({'transition': 'all 0.01s linear', 'transform': 'rotate(' + ang + 'deg)'}); }, 10); } 

    Exemplo de uso:

     var animated = $('#elem'); progressAnim(animated) 
     //this should allow you to replica an animation effect for any css property, even //properties //that transform animation jQuery plugins do not allow function twistMyElem(){ var ball = $('#form'); document.getElementById('form').style.zIndex = 1; ball.animate({ zIndex : 360},{ step: function(now,fx){ ball.css("transform","rotateY(" + now + "deg)"); },duration:3000 }, 'linear'); }