Анимировать элемент преобразование поворот

ответ Райли - это здорово, но у меня есть текст в элементе. Чтобы повернуть текст вместе со всем остальным, я использовал свойство border-spacing вместо text-indent.

кроме того, чтобы немного прояснить стиль элемента, установите начальное значение:

#foo {
    border-spacing: 0px;
}

затем в анимированном фрагменте, ваше конечное значение:

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

в моем случае, она вращается на 90 градусов против часовой стрелки.

вот живой демо.

на мой взгляд, в jQuery animate немного злоупотребляет, по сравнению с CSS3 transition, который выполняет такую анимацию на любом 2D или 3D свойстве. Также я боюсь, что оставив его в браузере и забыв слой под названием JavaScript может привести к запасной сок процессора - особенно, когда вы хотите, чтобы взорвать с анимацией. Таким образом, мне нравится иметь анимации, где определения стиля, так как вы определяете функциональность с помощью JavaScript. Чем больше презентации вы вводите в JavaScript, тем больше проблем вы столкнетесь позже.

все, что вам нужно сделать, это использовать addClass к элементу, который вы хотите анимировать, где вы устанавливаете класс, который имеет CSS transition свойства. Ты просто "активировать" анимация, который реализовано на чистом уровне представления.

.js

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

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

можно было бы легко удалить класс с помощью jQuery, или удалить класс без библиотека.

.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>

это быстрое и удобное решение для большинства случаев использования.

Я также использую это, когда хочу реализовать другой стиль (альтернативные свойства CSS) и хочу изменить стиль на лету с помощью глобального .5s анимация. Я добавляю новый класс в BODY, имея альтернативный CSS в виде, как это:

.js

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

.css

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

таким образом, вы можете применять различные стили с анимацией, без загрузки различных файлов CSS. Вы используете только JavaScript для установки class.

чтобы добавить к ответам Ryley и atonyc, вам на самом деле не нужно использовать реальное свойство CSS, например text-index или border-spacing, но вместо этого вы можете указать поддельное свойство CSS, например rotation или my-awesome-property. Это может быть хорошей идеей, чтобы использовать что-то, что не рискует стать настоящей свойства CSS в будущем.

кроме того, кто-то спросил как анимировать другие вещи одновременно. Это можно сделать как обычно, но помните, что step функция вызывается для каждого анимированные собственность, поэтому вам придется проверить свою собственность, например:

$('#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)');  
            }
        }
    });

(примечание: Я не могу найти документацию для объекта "Tween" в документации jQuery; от страница анимированной документации есть ссылка на http://api.jquery.com/Types#Tween который является разделом, который, кажется, не существует. Вы можете найти код для прототипа Tween на Github здесь).

просто используйте CSS переходы:

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

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

в качестве примера я установил продолжительность анимации до 0,5 секунды.

Примечание setTimeout удалить transition свойство css после завершения анимации (500 мс)

---

для удобства чтения я опустил префиксы поставщиков.

Это решение требует поддержки перехода браузера с курса.

я наткнулся на этот пост, пытаясь использовать CSS transform в jQuery для бесконечной анимации цикла. Это один работал хорошо для меня. Хотя я не знаю, насколько это профессионально.

function progressAnim(e) {
    var ang = 0;

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

пример использования:

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