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

Question

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

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

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

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

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

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

727 7

css rotation internet-explorer

7 ответов:

Comments

Ничего не найдено.

Spudley · Accepted Answer · 2016-02-18 16:45:26

, чтобы повернуть на 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) */
надеюсь, что это поможет.

Edit

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

после того, как вы добавили CSS наждачную бумагу на свой сайт, вы должны быть в состоянии написать следующий код CSS для IE6–8:
-sand-transform: rotate(40deg);
гораздо проще, чем традиционные filter стиль, который вам обычно нужно использовать в IE.

Edit

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

zzzzBov · Accepted Answer · 2012-10-05 16:12:11

вам нужно будет сделать матричное преобразование следующим образом:
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°).

nmsdvid · Accepted Answer · 2012-05-08 22:28:48

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

Steve Burrows · Accepted Answer · 2017-05-23 15:34:24

http://css3please.com/

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

Pedro Ferreira · Accepted Answer · 2014-01-29 22:30:45

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

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

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

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

Chanchal Prashant Tapase · Accepted Answer · 2014-09-10 11:33:00

Полезные Ссылки для IE transform

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

C_J · Accepted Answer · 2016-06-21 01:32:58

для примера IE11 (тип браузера=Trident version=7.0):
image.style.transform = "rotate(270deg)";