Animar elemento transformar rotar

La respuesta de Ryley es genial, 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.

También, para aclarar un poco, en el estilo del elemento, establezca su valor inicial:

#foo {
    border-spacing: 0px;
}

Luego, en el fragmento de animate, 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 contrario a las agujas del reloj.

Aquí está la demostración en vivo.

En mi opinión, el animate de jQuery está un poco sobreutilizado, en comparación con el CSS3 transition, que realiza dicha animación en cualquier propiedad 2D o 3D. También me temo, que dejándolo al navegador y olvidando la capa llamada JavaScript podría llevar a jugo de CPU de repuesto - especialmente, cuando se desea explosión con las animaciones. Por lo tanto, me gusta tener animaciones donde están las definiciones de estilo, ya que se define la funcionalidad con JavaScript. Más presentación que inyecte en JavaScript, más problemas enfrentará más adelante.

Todo lo que tiene que hacer es usar addClass para el elemento que desea animar, donde establece una clase que tiene propiedades CSS transition. simplemente "activa" la animación, que permanece implementada en la capa de presentación pura.

.js

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

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

Uno podría fácil eliminar una clase con jQuery, o eliminar una clase sin library .

.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 un global .animación 5s. Agrego una nueva clase a BODY, mientras que tengo CSS alternativo en una forma como esto:

.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 se requiere JavaScript para establecer un class.

Para agregar a las respuestas de Ryley y atonyc, en realidad no tienes que usar una propiedad CSS real, como text-index o border-spacing, sino que puedes especificar una propiedad CSS falsa, como rotation o my-awesome-property. Podría 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 función step se llama para cada propiedad animada, por lo que tendrá para comprobar 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 del objeto "Tween" en la documentación de jQuery; desde la página de documentación de animate 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 de interpolación 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 el setTimeout para eliminar la propiedad css transition después de que la animación haya terminado (500 ms)

Para facilitar la lectura he omitido los prefijos de proveedor.

Esta solución requiere el soporte de transición del navegador fuera de curso.

Me topé con este post, buscando usar transformación CSS en jQuery para una animación de bucle infinito. Este funcionó bien para mí. No se que 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');
            }