CSS3 transform: rotate; в IE9

У меня есть элемент, который должен быть вертикальным в дизайне, который я сделал. У меня есть css для этого, чтобы работать во всех браузерах, кроме IE9. Я использовал фильтр для IE7 и IE8:

progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

Это, как представляется, делает мой элемент прозрачным в IE9, а CSS3 'tranform' porperty, похоже, ничего не делает!

Кто-нибудь знает о вращающихся элементах в IE9?

Действительно оцените помощь!

Ш.

Ответы

Ответ 1

Стандартный CSS3 rotate должен работать в IE9, но я считаю, что вам нужно предоставить ему префикс поставщика, например:

  -ms-transform: rotate(10deg);

Возможно, он не работает в бета-версии; если нет, попробуйте загрузить текущую версию предварительного просмотра (предварительный просмотр 7), которая является более поздней версией бета-версии. У меня нет бета-версии для тестирования, поэтому я не могу подтвердить, была ли она в этой версии или нет. Окончательная версия релиза определенно намечена на ее поддержку.

Я также могу подтвердить, что IE-специфическое свойство filter было сброшено в IE9.

[Изменить]
Люди попросили дополнительную документацию. Как говорится, это довольно ограниченно, но я нашел эту страницу: http://css3please.com/, которая полезна для тестирования различных функций CSS3 во всех браузерах.

Но тестирование функции поворота на этой странице в предварительном просмотре IE9 вызвало ее сбой довольно эффектно.

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

Еще одна полезная контрольная точка, для которой реализованы функции, в которых браузеры - www.canIuse.com - см. http://caniuse.com/#search=rotation

[EDIT]
Возрождение этого старого ответа, потому что я недавно узнал о взломе под названием CSS Sandpaper, который имеет отношение к вопросу и может облегчить задачу.

Hack реализует поддержку стандартного CSS transform для старых версий IE. Итак, теперь вы можете добавить в свой CSS следующее:

-sand-transform: rotate(10deg);

... и работать в IE 6/7/8 без использования синтаксиса filter. (конечно, он по-прежнему использует синтаксис фильтра за кулисами, но это значительно упрощает управление, поскольку использует аналогичный синтаксис для других браузеров)

Ответ 2

Попробуйте это

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
    margin-left: 50px;
    margin-top: 50px;
    margin-right: 50px;
    margin-bottom: 50px;
}
.rotate {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    -o-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    -sand-transform: rotate(10deg);
    display: block;
    position: fixed;
}
</style>
</head>

<body>
<div class="rotate">Alpesh</div>
</body>
</html>

Ответ 3

У меня также были проблемы с преобразованиями в IE9, я использовал -ms-transform: rotate(10deg), и это не сработало. Пробовал все, что мог, но проблема была в режиме браузера, чтобы сделать преобразования, вам нужно установить режим совместимости на "Стандартный IE9".

Ответ 4

Я знаю, что это старо, но у меня была эта же проблема, я нашел этот пост, и хотя он не объяснил точно, что случилось, это помогло мне правильно ответить - так что надеюсь, мой ответ поможет кому-то другому, кто может иметь аналогичную проблему для моей.

У меня был элемент, который я хотел повернуть вертикально, поэтому, естественно, я добавил фильтр: для IE8, а затем для свойства -ms-transform для IE9. Я обнаружил, что наличие свойства -ms-transform И фильтр, применяемый к одному и тому же элементу, заставляет IE9 отображать элемент очень плохо. Мое решение:

  • Если вы используете свойство transform-origin, добавьте его и для MS (-ms-transform-origin: left bottom;). Если вы не видите свой элемент, возможно, он вращается на нем по средней оси и таким образом оставляет страницу как-то - так что дважды проверьте это.

  • Переместите фильтр: свойство для IE7 & 8 в отдельную таблицу стилей и используйте IE, чтобы вставить эту таблицу стилей для браузеров, меньшую, чем IE9. Таким образом, это не влияет на стили IE9, и все должно работать нормально.

  • Обязательно используйте правильный тег DOCTYPE; если у вас это неправильно IE9 не будет работать должным образом.