Вращая div о точке - PullRequest
Новая
       3

Вращая div о точке

3 голосов
/ 16 декабря 2010

Я хочу анимировать вращение div вокруг определенной точки.Я пытался animate() метод в jQuery, чтобы заставить это работать.

Я пытался анимировать с {rotate: "+=9deg"}, но он не работает.Также попытался использовать MozTransform..., и это не сработало.

Однако что-то вроде этого работает: {'-moz-transform': 'rotate('+degrees+'deg)'}

Есть ли что-то, что я делаю неправильно с более простыми, более интуитивными способами?Или это ошибка в jquery?Или это абсурдный путь, и я должен сделать это на «хардвее»?

Ответы [ 4 ]

3 голосов
/ 17 декабря 2010

Вот полная таблица стилей CSS, необходимая для того, чтобы все текущие браузеры поворачивали элемент.Я прокомментировал стили с соответствующими браузерами, на которые они влияют. 

.myclass {
  -ms-transform: rotate(45deg);   /* IE9 ? */
  -moz-transform: rotate(45deg);  /* FF3.5+ */
  -o-transform: rotate(45deg);  /* Opera 10.5 */
  -webkit-transform: rotate(45deg);  /* Saf3.1+, Chrome */
  transform: rotate(45deg);  /* CSS3 (for when it gets supported) */
  filter: progid\:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */
}

В этом примере элемент поворачивается на 45 градусов.Стили IE6 / 7/8 filter и -ms-filter используют радианы вместо градусов.

Другая большая разница между стилями filter и остальными - это начальная точка вращения.Если я правильно помню, стили transform вращаются вокруг центра, в то время как стили MS вращаются вокруг верхнего левого угла.Я считаю, что это можно исправить, но мы решили эту проблему, просто применив стиль только для IE, который сместил абсолютную позицию элемента, чтобы он оказался в том же месте.Очевидно, что это не поможет вам, когда дело доходит до анимации.

Последнее, на что следует обратить внимание, это то, что стиль IE6 / 7 filter на самом деле является недопустимым CSS (потому что он содержит двоеточия и другие зарезервированные символы).).Вариант -ms-filter для IE8 хорошо, потому что он в кавычках, но это не разрешено в версии IE6 / 7.Эта проблема фактически нарушает синтаксический анализ CSS в Firefox (и, возможно, в других браузерах) до такой степени, что любые последующие стили не будут прочитаны.По этой причине я рекомендую включить его (или хотя бы части, относящиеся к IE) в его собственную таблицу стилей.

2 голосов
/ 18 мая 2011

Чтобы повернуть точку, используйте свойство transform-origin.Например, следующее установит поворот вокруг нижней левой точки. 

{
    transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
    -webkit-transform-origin':'0% 100%;
    -o-transform-origin:0% 100%;
    -ms-transform-origin': 0% 100%
}
2 голосов
/ 17 декабря 2010

Найден плагин, который делает именно это:

https://github.com/heygrady/transform/wiki/

Он позволяет анимировать преобразования с использованием стандартной функции animate ()!

1 голос
/ 16 декабря 2010

rotate не является свойством CSS, поэтому .animate() не будет работать с ним. (.animate() просто постепенно меняет указанные свойства CSS с одного значения на другое.)

...