Свойство поворота CSS в IE

Я хочу повернуть DIV в определенной степени. В FF он функционирует, но в IE я сталкиваюсь с проблемой.

например, в следующем стиле я могу установить rotation=1 до 4

 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

это означает, что DIV будет повернут на 90 или 180 или 270 или 360 градусов. Но если мне нужно повернуть DIV только на 20 градусов, то он больше не работает.

Как я могу решить эту проблему в IE?

73
css internet-explorer rotation

7 ответов

, чтобы повернуть на 45 градусов в IE, вам нужен следующий код в таблицу стилей:

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

вы заметите, что IE8 имеет другой синтаксис для IE6/7. Вам нужно предоставить обе строки кода, если вы хотите поддерживать все версии IE.

ужасные числа есть в радианах; вам нужно будет разработать цифры для себя, если вы хотите использовать угол, отличный от 45 градусов (есть уроки в интернете, если вы ищите их.)

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

все другие текущие браузеры (включая IE9 и IE10 - yay!) поддержка CSS3 с transform стиль (хотя часто с префиксами поставщиков), поэтому вы можете использовать следующий код для достижения того же эффекта во всех других браузерах:

-moz-transform: rotate(45deg);  /* FF3.5/3.6 */
-o-transform: rotate(45deg);  /* Opera 10.5 */
-webkit-transform: rotate(45deg);  /* Saf3.1+ */
transform: rotate(45deg);  /* Newer browsers (incl IE9) */

надеюсь, что это поможет.

редактировать

поскольку этот ответ все еще поднимается-голоса, я чувствую, что должен обновить его с информацией о библиотеке JavaScript под названием CSS наждачная бумага что позволяет использовать (рядом) стандартный код CSS для вращений даже в старых версиях IE.

после того, как вы добавили CSS наждачной бумаги на ваш сайт, вы должны быть в состоянии написать следующий код CSS для IE6-8:

-sand-transform: rotate(40deg);

гораздо проще, чем традиционные filter стиль, который вам обычно нужно использовать в IE.

редактировать

также обратите внимание на дополнительную причуду специально с IE9 (и только IE9), которая поддерживает оба стандарта transform и старый стиль IE -ms-filter. Если вы указали оба из них, это может в результате IE9 полностью запутывается и отображает только сплошной черный ящик, где элемент был бы. Лучшее решение для этого-избежать filter стиль с помощью наждачной бумаги polyfill, упомянутых выше.

145

вам нужно будет выполнить матричное преобразование следующим образом:

filter: progid:DXImageTransform.Microsoft.Matrix(
  M11 = COS_THETA,
  M12 = -SIN_THETA,
  M21 = SIN_THETA,
  M22 = COS_THETA,
  sizingMethod = 'auto expand'
);
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(
  M11 = COS_THETA,
  M12 = -SIN_THETA,
  M21 = SIN_THETA,
  M22 = COS_THETA,
  SizingMethod = 'auto expand'
)";

где COS_THETA и SIN_THETA-значения Косинуса и синуса угла (т. е. 0.70710678 на 45°).

58

существует инструмент под названием IETransformsTranslator. С помощью этого инструмента вы можете сделать матричный фильтр преобразует то,что работает на IE6, IE7 & IE8. Просто вставьте функции преобразования CSS3 (например, поворот (15deg)), и он сделает все остальное. http://www.useragentman.com/IETransformsTranslator/

26

http://css3please.com/

прокрутите вниз до '.box_rotate ' для префикса Microsoft IE9+. Аналогичное обсуждение здесь: вращение элемента Div в jQuery

6

просто намек... подумайте дважды, прежде чем использовать "transform: rotate ()" или даже "-ms-transform :rotate()" (IE9) с мобильными телефонами!

я стучал в стену в течение нескольких дней. У меня есть "кинетическая" система, которая скользит по изображениям и, поверх нее, командная область. Я сделал "преобразование" на кнопке со стрелкой, чтобы он имитировал направление вверх и вниз... Я reviewd 1.000 плюс строки кода для возрастов!!! ;-)

все в порядке, как только я удалил transform: rotate из CSS. Это немного (не использовать плохие слова) сложно, как IE обрабатывает его, по сравнению с другими borwsers.

отличный ответ @Spudley! Спасибо, что написала!

2

Полезные Ссылки для преобразования IE

этот инструмент преобразует свойства преобразования CSS3 (которые используют почти все современные браузеры) в эквивалентный CSS, используя запатентованную технологию визуальных фильтров Microsoft.

2

для примера IE11 (тип браузера=Trident version=7.0):

image.style.transform = "rotate(270deg)";
0