CSS3 преобразование: поворот;в IE9 - PullRequest
Новая
       54

CSS3 преобразование: поворот;в IE9

77 голосов
/ 01 февраля 2011

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

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

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

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

Очень ценю помощь!

W.

Ответы [ 4 ]

137 голосов
/ 01 февраля 2011

Стандартное вращение CSS3 должно работать в 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

[РЕДАКТИРОВАТЬ]Возрождая этот старый ответ, потому что я недавно узнал о хаке под названием CSS наждачная бумага , который имеет отношение к вопросу и может облегчить задачу.

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

-sand-transform: rotate(10deg);

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

5 голосов
/ 01 апреля 2013

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

<!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>
4 голосов
/ 11 июня 2012

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

3 голосов
/ 02 сентября 2014

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

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

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

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

  3. Убедитесь, что вы также используете правильный тег DOCTYPE;если вы ошиблись, IE9 не будет работать должным образом.

...