РЕДАКТИРОВАТЬ: Обновлено для 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);
});
РЕДАКТИРОВАТЬ: Добавлен код, чтобы сделать его функцией 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);
});
РЕДАКТИРОВАТЬ: Один из комментариев к этому сообщению упоминается 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
Убедитесь, что они заключены в $ (документ) .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)'});
});