Перетворення CSS3: обертати; в IE9

Question 1

У мене є елемент, який повинен бути вертикальним у виконаному мною дизайні. У мене є css, щоб це працювало у всіх браузерах, крім IE9. Я використовував фільтр для IE7 та IE8:

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

Однак це, здається, робить мій елемент прозорим в IE9, а властивість CSS3 'tranform', здається, нічого не робить!

Хто-небудь знає як-небудь обертові елементи в IE9?

Дуже цінуємо допомогу!

В.

Question 2

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

  -ms-transform: rotate(10deg);

Не виключено, що це може не працювати в бета-версії; якщо ні, спробуйте завантажити поточну версію попереднього перегляду (попередній перегляд 7), що є пізнішою версією бета-версії. У мене немає бета-версії для тестування, тому я не можу підтвердити, чи була вона в цій версії чи ні. Остаточна версія, безумовно, має намір підтримати її.

Я також можу підтвердити, що filterвластивість IE-специфіки була вилучена з 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синтаксис. (звичайно, він все ще використовує синтаксис фільтра за кадром, але це значно полегшує управління, оскільки він використовує синтаксис, подібний до інших браузерів)

Question 3

Спробуйте це

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

Question 4

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

Question 5

Я знаю, що це старе, але у мене була така сама проблема, я знайшов цю публікацію, і хоча вона не пояснила, що саме було неправильним, вона допомогла мені отримати правильну відповідь - тому, сподіваюся, моя відповідь допомагає комусь іншому, хто може мати подібна проблема до моєї.

У мене був елемент, який я хотів повернути вертикально, тому, природно, я додав фільтр: для IE8, а потім властивість -ms-transform для IE9. Що я виявив, що наявність властивості -ms-transform І фільтра, застосованого до того самого елемента, призводить до того, що IE9 відображає елемент дуже погано. Моє рішення:

Якщо ви використовуєте властивість transform-origin, додайте також для MS (-ms-transform-origin: ліворуч знизу;). Якщо ви не бачите свій елемент, можливо, він обертається на середній осі і, таким чином, якось залишає сторінку - тож перевірте це.
Перемістіть властивість filter: IE7 & 8 в окрему таблицю стилів та використовуйте умовний IE, щоб вставити цю таблицю стилів для браузерів, менших за IE9. Таким чином, це не впливає на стилі IE9, і всі вони повинні працювати нормально.
Не забудьте також використовувати правильний тег DOCTYPE; якщо у вас все неправильно, IE9 не працюватиме належним чином.