Как повернуть div с помощью jQuery

Ответ 1

EDIT: Обновлено для jQuery 1.8

Так как специальные преобразования jQuery 1.8 будут добавлены автоматически. jsFiddle Demo

var rotation = 0;

jQuery.fn.rotate = function(degrees) {
    $(this).css({'transform' : 'rotate('+ degrees +'deg)'});
    return $(this);
};

$('.rotate').click(function() {
    rotation += 5;
    $(this).rotate(rotation);
});

EDIT: Добавлен код, чтобы сделать его функцией jQuery.

Для тех из вас, кто не хочет читать дальше, вы здесь. Для получения более подробной информации и примеров, читайте дальше. jsFiddle Demo.

var rotation = 0;

jQuery.fn.rotate = function(degrees) {
    $(this).css({'-webkit-transform' : 'rotate('+ degrees +'deg)',
                 '-moz-transform' : 'rotate('+ degrees +'deg)',
                 '-ms-transform' : 'rotate('+ degrees +'deg)',
                 'transform' : 'rotate('+ degrees +'deg)'});
    return $(this);
};

$('.rotate').click(function() {
    rotation += 5;
    $(this).rotate(rotation);
});

EDIT: один из комментариев к этому сообщению упоминается jQuery Multirotation. Этот плагин для jQuery по существу выполняет вышеупомянутую функцию с поддержкой IE8. Возможно, стоит использовать, если вы хотите иметь максимальную совместимость или больше параметров. Но для минимальных накладных расходов я предлагаю эту функцию. Он будет работать IE9 +, Chrome, Firefox, Opera и многие другие.

Бобби... Это для людей, которые действительно хотят сделать это в javascript. Это может потребоваться для вращения на обратном вызове javascript.

Вот jsFiddle.

Если вы хотите повернуть с настраиваемыми интервалами, вы можете использовать jQuery для ручной установки css вместо добавления класса. Как этот! Я включил оба параметра jQuery в нижней части ответа.

HTML

<div class="rotate">
    <h1>Rotatey text</h1>
</div>

CSS

/* Totally for style */
.rotate {
    background: #F02311;
    color: #FFF;
    width: 200px;
    height: 200px;
    text-align: center;
    font: normal 1em Arial;
    position: relative;
    top: 50px;
    left: 50px;
}

/* The real code */
.rotated {
    -webkit-transform: rotate(45deg);  /* Chrome, Safari 3.1+ */
    -moz-transform: rotate(45deg);  /* Firefox 3.5-15 */
    -ms-transform: rotate(45deg);  /* IE 9 */
    -o-transform: rotate(45deg);  /* Opera 10.50-12.00 */
    transform: rotate(45deg);  /* Firefox 16+, IE 10+, Opera 12.10+ */
}

JQuery

Убедитесь, что они завернуты в $(document).ready

$('.rotate').click(function() {
    $(this).toggleClass('rotated');
});

Пользовательские интервалы

var rotation = 0;
$('.rotate').click(function() {
    rotation += 5;
    $(this).css({'-webkit-transform' : 'rotate('+ rotation +'deg)',
                 '-moz-transform' : 'rotate('+ rotation +'deg)',
                 '-ms-transform' : 'rotate('+ rotation +'deg)',
                 'transform' : 'rotate('+ rotation +'deg)'});
});