CSS Поворот IE7 и 8

Question

Я собираюсь задать еще один вопрос!

Итак, CSS Rotate работает в ie9, но получение поворота для работы в предыдущей версии будет моей смертью!

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

Эта строка кода поворачивает элементы на 90 градусов, но примерно в том же месте, что и другие браузеры. Если элемент расположен слишком близко к стороне страницы, он может быть повернут наружу. IE документы Microsoft не дают понять, как установить источник преобразования.

Мой полный код:

#quick {
    position:fixed;
    top:250px;
    left:-158px;
}
#qmenu-wrapper {
    background-image: url(../images/img_08.png);
    background-repeat:repeat-x;
    height: 35px;
    width:350px;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform:rotate(90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

}

Есть ли что-то, что мы можем сделать, чтобы IE 7 и 8 обрабатывали повороты так же, как 9?

Спасибо.

Me!

Answer 1

Посмотрите на заголовок слева от этого сайта . Я решил проблему с точкой вращения, поместив элемент в меньший элемент с overflow:visible и вращая этот элемент. Другими словами, я сделал свою точку опоры.

В этом примере я также использую режим письма для поворота текста в IE, поскольку использование фильтров отключает сглаживание шрифтов.

<style type="text/css">
/* This wrapper is required to rotate the text around the left edge */

#page_title {
overflow: visible;
position: absolute;
width: 38px;
-moz-transform: rotate(90deg);
-moz-rotation-point: 0 0;
-webkit-transform: rotate(90deg);
-webkit-rotation-point: 0 0;
-o-transform: rotate(90deg);
-ms-writing-mode: tb-lr;
* html writing-mode: tb-lr;
}

#page_title h1 {
display: block;
font-size: 70px;
font-weight: normal;
line-height: 38px;
color: #F3C1E0;
font-variant: small-caps;
width: auto;
}
</style>

<div id="page_title">
<h1>Inwardpath&nbsp;Publishers</h1>
</div>

Answer 2

IE5.5, IE6, IE7 и IE8 поддерживают filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); IE5 не поддерживает его!

Источник

Чтобы изменить источник вращения, используя фильтры DXпросто используйте Matrix filter, чтобы изменить положение вашего элемента.Вы можете иметь несколько фильтров на один элемент.Вы должны сделать немного математики.Удачи с этим!