Transform rotate css jquery

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

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

Есть плагин JQuery, jQuery Transform , который вращает элементы (среди прочего). Если вам нужно поддерживать не последнюю версию IE, это лучший подход, чем использование обходных путей к filter поскольку он использует тот же источник вращения — тогда как вращения filter вращаются вокруг другой точки обычного CSS. Больше информации и живые демонстрации по этому вопросу .

7 ответов

Поворот 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

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

@PeterAjtai: я знаю, что это старая запись, но она все еще отображается в поиске Google в верхней части страницы, поэтому я считаю уместным упомянуть здесь. при использовании сценария для установки степени поворота и использовании значений добавочной степени, например: rotate(++degree) deg rotate(++degree) проблема заключается в том, что вы никогда не увеличиваете конечное значение степени. то есть: rotate(70531deg) т. д. В конце концов я предполагаю, что достигнуто максимальное значение. В сценарии должен быть встроен механизм, в соответствии с которым, если степень достигает 360, начинается с 0. Поэтому он никогда не поднимется выше 360 и только пойдет 0-360.

@PeterAjtai: я добавил очень простой пример к вашей существующей скрипке о том, как переустановить значение степени, чтобы оно никогда не заканчивалось высоким. Посмотрите на эту раздвоенную скрипку. Если вы смотрите DOM сейчас во время поворота, вы можете видеть, что он переустанавливается каждые 360 градусов на 0.

@Nope: Ну, максимальное целочисленное значение в javascript составляет около 9 квадриллионов, и функция выполняется каждые 5 миллисекунд. Таким образом, вы достигнете максимального значения через 1,4 миллиона лет. Я думаю, что это хорошо.

@rocketsarefast Это очень отношение «Мы пересекаем этот мост, когда добираемся», что в большинстве случаев является основной причиной возникновения серьезных проблем в будущем (возможно, не в этом конкретном случае, но в целом так и есть). Хотя я не делаю предварительную оптимизацию до того, как она понадобится, в большинстве случаев я не рекомендую тратить ресурсы впустую, если небольшие изменения могут предотвратить эти потери. Каждому свое 🙂

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

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

@curtis IE10 больше не поддерживает фильтры. Режим эмуляции также не поддерживает фильтры. Вам придется протестировать его в реальных IE7 и IE8, чтобы убедиться, что он работает.

Это вроде работает, но использование хитрого матричного фильтра IE имеет побочный эффект: элемент после поворота будет иметь начало координат, отличное от того, что было до его поворота. Смотрите крайне неудовлетворительноtotalitarism.com/ blog/? p= 1002 . Сказав это, я боюсь, что это нетривиальная задача — добиться последовательной ротации между браузерами без использования какого-либо третьего плагина jQuery, такого как link , который, как я убедился, хорошо работает в IE8.

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

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

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

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

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

var rotation = 0; jQuery.fn.rotate = function(degrees) < $(this).css(); return $(this); >; $('.rotate').click(function() < rotation += 5; $(this).rotate(rotation); >); 

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

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

var rotation = 0; jQuery.fn.rotate = function(degrees) < $(this).css(); return $(this); >; $('.rotate').click(function() < rotation += 5; $(this).rotate(rotation); >); 

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

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

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

/* 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+ */ >

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

var rotation = 0; $('.rotate').click(function() < rotation += 5; $(this).css(); >); 

Источник

jQuery jQuery Transform JS

jQuery Transform JS is a jQuery Browser / Tweaks plugin.

Created by Louisremi

jQuery cssHooks adding a cross browser transform property to $.fn.css() and $.fn.animate()

Not what you’re looking for? Click here to view more Browser / Tweaks jQuery plugins

jquery.transform2d.js adds 2d transform capabilities to jQuery css() and animate() functions.

Usage:

Set transform with a string

$(elem).css('transform', 'translate(50px, 30px) rotate(25deg) scale(2,.5) skewX(-35deg)'); $(elem).animate();

You can use the following list of transform functions:

• translateX(px)
• translateY(px)
• combined: translate(px, px) the second number is optional and defaults to 0
• scaleX()
• scaleY()
• combined: scale(, ) the second number is optional and defaults to the value of the first one
• rotate() units for angles are rad (default), deg or grad.
• skewX()
• skewY()
• matrix(, , , , , ) *

* matrix gives you more control about the resulting transformation, using a matrix construction set.
When using it in animations however, it makes it impossible to predict how the current and target transformations are going to be interpolated; there is no way to tell whether elements are going to rotate clockwise or anti-clockwise for instance.

Get transform

returns a computed transform matrix.

$(elem).css('transform') == 'matrix(0,1,-1,0,100,50)';

Relative animations

Relative animations are possible by prepending «+=» to the transform string.

$(elem).css('transform', 'rotate(45deg)'); // using the following syntax, elem will always rotate 90deg anticlockwise $(elem).animate();

Limitations:

• requires jQuery 1.4.3+,
• Should you use the translate property, then your elements need to be absolutely positionned in a relatively positionned wrapper or it will fail in IE,
• transformOrigin is not accessible.

Why such restrictions with ‘translate’?

Since translate is unavailable in IEtop and left properties of the element style.
This can, of course, only work if the elements are absolutely positionned in a relatively positionned wrapper.

Other plugins position the elements and wrap them transparently.
I think that transparently messing with the DOM often introduces unpredictible behavior.
Unpredictible behavior leads developpers to fear plugins.
Fear leads to anger. Anger leads to hate. Hate leads to suffering.
I prefer leaving this up to you.

License

Dual licensed under GPL and MIT licenses.

You might also like these other Browser / Tweaks jQuery Plugins

Источник

jQuery Animate element transform rotate

The following tutorial shows you how to do «jQuery Animate element transform rotate».

The result is illustrated in the iframe.

You can check the full source code and open it in another tab using the links.

Javascript Source Code

The Javascript source code to do «jQuery Animate element transform rotate» is

$('#box').animate(< textIndent: 0 >, < step: function(now,fx) < $(this).css('-webkit-transform','rotate('+now+'deg)'); >, duration:'slow' >,'linear');

html> head> title>SO animate CSS3 transform  meta name="viewport" content="width=device-width, initial-scale=1"> script type="text/javascript" src="https://code.jquery.com/jquery-1.5.2.js" > script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js">  style id="compiled-css" type="text/css"> #box !-- w w w . de m o 2 s . c o m --> width:100px; height:100px; position:absolute; top:100px; left:100px; text-indent: 90px; background-color:red; >  body> div id="box">  script type='text/javascript'> $('#box').animate(< textIndent: 0 >, < step: function(now,fx) < $(this).css('-webkit-transform','rotate('+now+'deg)'); >, duration:'slow' >,'linear');   

Related

• jQuery this CSS3 Rotation Animation setup not working on Chrome & Safari (Demo 2)
• jQuery 3D rotating animated panel that shows up after click on a menu link
• jQuery 3D rotating animated panel that shows up after click on a menu link (Demo 2)
• jQuery Animate element transform rotate
• jQuery Animate element transform rotate (Demo 2)
• jQuery animate scale and rotate separately with css3 and jquery
• jQuery CSS rotation cross browser with jquery.animate()

demo2s.com | Email: | Demo Source and Support. All rights reserved.

Источник