CSS rotate свойство в IE

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

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

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

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

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

Ответ 1

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

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 Sandpaper, которая позволяет вам использовать (рядом) стандартный CSS-код для ротации даже в более старых версиях IE.

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

-sand-transform: rotate(40deg);

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

Изменить

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

Ответ 2

Вам понадобится преобразование матрицы следующим образом:

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 & deg;).

Ответ 3

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

Ответ 4

http://css3please.com/

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

Ответ 5

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

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

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

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

Ответ 6

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

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

Ответ 7

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

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