Animar elemento transformar rotar

¿Cómo rotaría un elemento con un jQuery .animate()? Estoy usando la línea de abajo, que actualmente está animando la opacidad correctamente, pero ¿esto es compatible con las transformaciones CSS3?

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

Hasta donde yo sé, las animaciones básicas no pueden animar propiedades CSS no numéricas.

Creo que podría hacer esto usando una función de paso y la transformación css3 apropiada para el navegador de los usuarios. La transformación CSS3 es un poco complicada para cubrir todos sus navegadores (IE6 necesita usar el filtro Matrix, por ejemplo).

EDITAR : aquí hay un ejemplo que funciona en navegadores webkit (Chrome, Safari): http://jsfiddle.net/ryleyb/ERRmd/

Si solo desea admitir IE9, puede usar en transformlugar de -webkit-transform, o -moz-transformsería compatible con FireFox.

El truco utilizado es animar una propiedad CSS que no nos importa ( text-indent) y luego usar su valor en una función de paso para hacer la rotación:

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

La respuesta de Ryley es excelente, pero tengo texto dentro del elemento. Para rotar el texto junto con todo lo demás, utilicé la propiedad border-spacing en lugar de text-indent.

Además, para aclarar un poco, en el estilo del elemento, establezca su valor inicial:

#foo {
    border-spacing: 0px;
}

Luego, en el fragmento animado, su valor final:

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

En mi caso, gira 90 grados en sentido antihorario.

Aquí está la demostración en vivo .

En mi opinión, jQuery animateestá un poco sobreutilizado, en comparación con CSS3 transition, que realiza dicha animación en cualquier propiedad 2D o 3D. También me temo que dejarlo en manos del navegador y olvidar la capa llamada JavaScript podría llevar a un uso de CPU de repuesto , especialmente cuando desea explotar con las animaciones. Por lo tanto, me gusta tener animaciones donde están las definiciones de estilo, ya que tú defines la funcionalidad con JavaScript . Cuanta más presentación inyecte en JavaScript, más problemas enfrentará más adelante.

Todo lo que tienes que hacer es usar addClassel elemento que deseas animar, donde configuras una clase que tiene transitionpropiedades CSS . Usted acaba de "activar" la animación , que se mantiene a cabo sobre la capa de presentación pura .

.js

// with jQuery
$("#element").addClass("Animate");

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

Se podría eliminar fácilmente una clase con jQuery o eliminar una clase sin 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

<span id="element">
    Text
</span>

Esta es una solución rápida y conveniente para la mayoría de los casos de uso.

También uso esto cuando quiero implementar un estilo diferente (propiedades CSS alternativas) y deseo cambiar el estilo sobre la marcha con una animación global de .5s. Agrego una nueva clase a BODY, mientras tengo CSS alternativo en una forma como esta:

.js

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

.css

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

De esta manera, puede aplicar diferentes estilos con animaciones, sin cargar diferentes archivos CSS. Solo implica JavaScript para configurar un class.

Para agregar a las respuestas de Ryley y atonyc, en realidad no tiene que usar una propiedad CSS real, como text-indexo border-spacing, sino que puede especificar una propiedad CSS falsa, como rotationo my-awesome-property. Puede ser una buena idea usar algo que no corra el riesgo de convertirse en una propiedad CSS real en el futuro.

Además, alguien preguntó cómo animar otras cosas al mismo tiempo. Esto se puede hacer como de costumbre, pero recuerde que la stepfunción se llama para cada propiedad animada, por lo que tendrá que verificar su propiedad, así:

$('#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: no puedo encontrar la documentación para el objeto "Tween" en la documentación de jQuery; desde la página de documentación animada hay un enlace a http://api.jquery.com/Types#Tween, que es una sección que no parece existir. Puedes encontrar el código para el prototipo Tween en Github aquí ).

Solo usa transiciones CSS:

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

setTimeout( function() { $(element).css( { transition: "none" } ) }, 500 );

Como ejemplo, establecí la duración de la animación en 0,5 segundos.

Tenga en cuenta que setTimeoutpara eliminar la transitionpropiedad css después de que finalice la animación (500 ms)

Para facilitar la lectura, omití los prefijos de los proveedores.

Esta solución requiere el soporte de transición del navegador por supuesto.

Me encontré con esta publicación, buscando usar la transformación CSS en jQuery para una animación de bucle infinito. Este funcionó bien para mí. Aunque no sé qué tan profesional es.

function progressAnim(e) {
    var ang = 0;

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

Ejemplo 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');
            }