CSS повернуть свойство в IE
Я хочу повернуть DIV в определенной степени. В FF это работает, но в IE я сталкиваюсь с проблемой.
Например, в следующем стиле я могу установить вращение от 1 до 4
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
Это означает, что DIV будет повернут на 90 или 180 или 270 или 360 градусов. Но если мне нужно повернуть DIV только на 20 градусов, он больше не работает.
Как я могу решить эту проблему в IE?
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 - ура!) Поддерживают 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 Sandpaper на свой сайт, вы сможете написать следующий код CSS для IE6–8:
-sand-transform: rotate(40deg);
Гораздо проще, чем традиционный filter стиль, который вы обычно должны использовать в IE.
редактировать
Также обратите внимание на дополнительную причуду специально с IE9 (и только IE9), который поддерживает оба стандарта transform и старый стиль IE -ms-filter, Если вы укажете их обоих, это может привести к тому, что IE9 будет полностью запутан и будет отображаться просто сплошной черный ящик там, где был бы элемент. Лучшее решение этого состоит в том, чтобы избежать filter стиль с помощью наждачной бумаги polyfill, упомянутой выше.
Вам нужно будет выполнить матричное преобразование следующим образом:
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°).
Существует онлайн-инструмент под названием IETransformsTranslator. С помощью этого инструмента вы можете преобразовать матричный фильтр, что работает в IE6,IE7 и IE8. Просто вставьте свои функции преобразования CSS3 (например, rotate(15deg)), и он сделает все остальное. http://www.useragentman.com/IETransformsTranslator/
Прокрутите вниз до ".box_rotate" для префикса Microsoft IE9+. Подобное обсуждение здесь: вращение элемента Div в jQuery
Просто подсказка... подумайте дважды, прежде чем использовать "transform: rotate()" или даже "-ms-transform:rotate()" (IE9) с мобильными телефонами!
Я много дней стучал к стене. У меня есть "кинетическая" система, которая скользит изображения и, поверх него, область команд. Я сделал "трансформацию" на кнопке со стрелкой, чтобы она имитировала наведение вверх и вниз... Я просмотрел более 1000 строк кода целую вечность!!!;-)
Все хорошо, как только я удалил transform: повернуть из CSS. Это немного (не говоря о плохих словах) сложно, как IE справляется с этим, по сравнению с другими браузерами.
Отличный ответ @Spudley! Спасибо, что написали это!
Полезная ссылка для преобразования IE
Этот инструмент преобразует свойства CSS3 Transform (которые используют почти все современные браузеры) в эквивалентный CSS с использованием запатентованной технологии Microsoft Visual Filters.
Для примера IE11 (тип браузера = версия Trident =7.0):
image.style.transform = "rotate(270deg)";