CSS3 transform: вращать; в IE9

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

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

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

Знает ли кто-нибудь в любом случае вращающиеся элементы в IE9?

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

источник

2011-02-01 wilsonpage

134

Стандартный 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

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

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

-sand-transform: rotate(10deg);

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

источник

2011-02-01 16:38:36 Spudley

Thanks Spud! Я собираюсь проверить это сейчас и вернуться к вам. Не мог поверить, как мало информации об этом в Интернете. – wilsonpage

@Spudley Не могли бы вы опубликовать источник? Я не могу найти это на MSDN http://msdn.microsoft.com/en-us/library/ms531207(v=vs.85).aspx –

@ Šime Vidas и @pagewil - вы правы, не так много документация вокруг. Я нашел его документированным здесь: http://css3please.com/, хотя я должен отметить, что эта страница разбила мою копию предварительного просмотра IE9, когда я попытался использовать свойство rotate. Тем не менее, мои собственные независимые тесты подтвердили, что свойство действительно работает, с префиксом поставщика, как я процитировал в своем ответе. (учитывая крах, я думаю, что в нем все еще есть ошибки!) – Spudley

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

источник

2012-06-11 10:58:57

нажмите f12 в ie и выберите режим браузера, чтобы изменить значение -9, а затем проверьте, будет ли это работать ... –

Чтобы IE9 работал с вертикальным текстом, вы должны отключить режим quirks, используя следующие как первые две строки вашего файла: '' ' ' – GlenPeterson

Любой действительный doctype должен отключать режим причуд, например: . Режим браузера должен быть IE9 по умолчанию, если вы не изменили свои настройки. – superluminary

Попробуйте

<!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>

источник

2013-04-01 05:06:28

Я пробую этот код с ie9, FireFox, Chrome, Safari и его работа –

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

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

Если вы используете свойство преобразования происхождения, добавьте один для MS тоже (-ms-преобразование координаты: левые нижней;). Если вы не видите свой элемент, возможно, он вращается на средней оси и таким образом оставляет страницу как-то - так что дважды проверьте это.
Переместить фильтр: свойство для IE7 & 8 в отдельную таблицу стилей и использовать IE, чтобы вставить эту таблицу стилей для браузеров меньше, чем IE9. Таким образом, это не влияет на стили IE9, и все должно работать нормально.
Обязательно используйте правильный тег DOCTYPE; если вы ошибаетесь, IE9 не будет работать должным образом.

источник

2014-09-02 19:42:59 Steve

Хороший вызов на '-ms-transform-origin'; который заставил меня почесывать голову на некоторое время. – danwild

CSS3 transform: вращать; в IE9

ответ

Смежные вопросы