Вращение элемента Div в jQuery

Попытка повернуть элемент div... Это может быть богохульство DOM, возможно ли это работать с элементом холста? Я не уверен - если у кого-нибудь есть идеи о том, как это может работать или почему это не так, я бы с удовольствием узнал. Спасибо.

Ответ 1

Поворот DIV Используйте WebkitTransform / -moz-transform: rotate(Xdeg).

Это не будет работать в IE. Библиотека Raphael работает с IE и она вращается. Я считаю, что он использует canvas es

Если вы хотите анимировать поворот, вы можете использовать рекурсивный setTimeout()

Возможно, вы даже можете сделать часть вращения с помощью jQuery .animate()

Убедитесь, что вы учитываете ширину элемента. Если вы поворачиваете ту, которая имеет большую ширину, чем ее видимое содержимое, вы получите смешные результаты. Однако вы можете сузить ширину элементов и затем повернуть их.

Вот просто фрагмент jQuery, который вращает элементы в объекте jQuery. Вращение можно запустить и остановить:

$(function() {
    var $elie = $(selectorForElementsToRotate);
    rotate(0);
    function rotate(degree) {

          // For webkit browsers: e.g. Chrome
        $elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)'});
          // For Mozilla browser: e.g. Firefox
        $elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)'});

          // Animate rotation with a recursive call
        setTimeout(function() { rotate(++degree); },5);
    }
});

Пример jsFiddle

Примечание:
Принимая степень и увеличивая ее, поверните изображение по часовой стрелке. Уменьшение степени поворота приведет к вращению изображения против часовой стрелки.

Ответ 2

Да, я думаю, тебе не удастся сильно повезти. Как правило, во всех трех методах рисования, которые используют основные браузеры (Canvas, SVG, VML), текстовая поддержка оставляет желать лучшего. Если вы хотите повернуть изображение, то все хорошо, но если у вас смешанный контент с форматированием и стилями, возможно, нет.

Откроется RaphaelJS для API-интерфейсов для кросс-браузера.

Ответ 3

Кросс-браузер вращается для любого элемента. Работает в IE7 и IE8. В IE7 он выглядит как не работающий в JSFiddle, но в моем проекте также работал в IE7

http://jsfiddle.net/RgX86/24/

var elementToRotate = $('#rotateMe');
var degreeOfRotation = 33;

var deg = degreeOfRotation;
var deg2radians = Math.PI * 2 / 360;
var rad = deg * deg2radians ;
var costheta = Math.cos(rad);
var sintheta = Math.sin(rad);

var m11 = costheta;
var m12 = -sintheta;
var m21 = sintheta;
var m22 = costheta;
var matrixValues = 'M11=' + m11 + ', M12='+ m12 +', M21='+ m21 +', M22='+ m22;

elementToRotate.css('-webkit-transform','rotate('+deg+'deg)')
    .css('-moz-transform','rotate('+deg+'deg)')
    .css('-ms-transform','rotate('+deg+'deg)')
    .css('transform','rotate('+deg+'deg)')
    .css('filter', 'progid:DXImageTransform.Microsoft.Matrix(sizingMethod=\'auto expand\','+matrixValues+')')
    .css('-ms-filter', 'progid:DXImageTransform.Microsoft.Matrix(SizingMethod=\'auto expand\','+matrixValues+')');

Редактировать 13/09/13 15:00 Обернутый приятным и легким, подключаемым плагином jquery.

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

$.fn.rotateElement = function(angle) {
    var elementToRotate = this,
        deg = angle,
        deg2radians = Math.PI * 2 / 360,
        rad = deg * deg2radians ,
        costheta = Math.cos(rad),
        sintheta = Math.sin(rad),

        m11 = costheta,
        m12 = -sintheta,
        m21 = sintheta,
        m22 = costheta,
        matrixValues = 'M11=' + m11 + ', M12='+ m12 +', M21='+ m21 +', M22='+ m22;

    elementToRotate.css('-webkit-transform','rotate('+deg+'deg)')
        .css('-moz-transform','rotate('+deg+'deg)')
        .css('-ms-transform','rotate('+deg+'deg)')
        .css('transform','rotate('+deg+'deg)')
        .css('filter', 'progid:DXImageTransform.Microsoft.Matrix(sizingMethod=\'auto expand\','+matrixValues+')')
        .css('-ms-filter', 'progid:DXImageTransform.Microsoft.Matrix(SizingMethod=\'auto expand\','+matrixValues+')');
    return elementToRotate;
}

$element.rotateElement(15);

JSFiddle: http://jsfiddle.net/RgX86/175/

Ответ 4

Вот два патча jQuery, которые могут помочь (возможно, уже включены в jQuery к тому моменту, когда вы читаете это):

Ответ 5

Я сомневаюсь, что вы можете повернуть элемент, используя DOM/CSS. Лучше всего сделать рендер на холсте и повернуть его (не уверен в специфике).

Ответ 6

Я собрал анимированную программу кодов вращения. вы можете получить свой код здесь... (если не поздно)

http://99mission.why3s.tw/rotatetest.html

Ответ 7

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