CSS rotate свойство в 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)";