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

Question

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

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

59

jquery ajax dom canvas jquery-animate

Источник

user43889 19 дек '08 в 23:43

7 ответов

Другие вопросы по тегам jquery ajax dom canvas jquery-animate

user186636 25 сен '10 в 01:35 2010-09-25 01:35 · Answer 1 · 2010-09-25 01:35

Чтобы повернуть DIV, используйте WebkitTransform / -moz-transform: rotate(Xdeg),

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

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

Вы могли бы даже сделать часть вращения с JQuery's .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

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

user696535 14 сен '12 в 15:52 2012-09-14 15:52 · Answer 2 · 2012-09-14 15:52

Кроссбраузерный поворот для любого элемента. Работает в 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/

user9021 20 дек '08 в 02:51 2008-12-20 02:51 · Answer 3 · 2008-12-20 02:51

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

Проверьте RaphaelJS для кросс-браузерного рисования API.

user1132674 18 апр '12 в 01:12 2012-04-18 01:12 · Answer 4 · 2012-04-18 01:12

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

1

Источник

user1132674 18 апр '12 в 01:12

user1669208 28 июн '16 в 11:45 2016-06-28 11:45 · Answer 5 · 2016-06-28 11:45

РЕДАКТИРОВАТЬ: Обновлено для 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 Демо.

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

user39992 20 дек '08 в 00:16 2008-12-20 00:16 · Answer 6 · 2008-12-20 00:16

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

0

Источник

user39992 20 дек '08 в 00:16

user2777343 24 апр '15 в 18:07 2015-04-24 18:07 · Answer 7 · 2015-04-24 18:07

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

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

-1

Источник

user2777343 24 апр '15 в 18:07