CSS повернуть свойство в IE

Question

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

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

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

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

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

Answer 1

Чтобы повернуть на 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 - ууу!) Поддерживают стиль 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.

Edit

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

Answer 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 °).

Answer 3

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

Answer 4

http://css3please.com/

Прокрутите вниз до «.box_rotate» для префикса Microsoft IE9 +. Подобное обсуждение здесь: Вращение элемента Div в jQuery

Answer 5

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

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

Answer 6

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

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

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

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

Answer 7

Для примера IE11 (тип браузера = версия Trident = 7.0):

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