Поверните текст на 270 градусов ТОЛЬКО в IE6 - PullRequest
2 голосов
/ 13 июля 2011

Я прочитал несколько других постов о переполнении стека и немного погуглил, но пока не видел ничего, что действительно работает.

У меня есть h2, я хочу повернуть 270 градусов во всех браузерах плюс IE6/ 7.Все браузеры, FF, Safari, Chrome, IE7 и т. Д., Отлично поворачивают текст, но IE6 просто не поворачивает 270. Я могу заставить его поворачиваться только на 90, а это не то, что мне нужно.

Вот HTML:

<div class="tab-content">
    <h1>Lorem Ipsum</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
</div>

А вот CSS:

.tab-content h1 {
    -webkit-transform: rotate(270deg);  
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);
    filter:progid:DXImageTransform.Microsoft.Matrix(M11=-0.00000000, M12=1.00000000, M21=-1.00000000, M22=-0.00000000,sizingMethod='auto expand');
    zoom: 1;
    font: 15px Arial, Helvetica, sans-serif;
    color: #4b4b4c;
    text-transform: uppercase;
}

Я тоже попробовал

writing-mode: tb-rl;
filter: flipv fliph; 

, и он повернет его на 90 градусов, ноне 270, как я хочу.

Я устал от & без зума: 1;и у меня заканчиваются идеи.Кто-нибудь хорошо разбирается в повороте текста в ie6?Есть много статей о вращающихся изображениях и тому подобное, но не много о тексте, и я подумал, что это будет то же изображение или заголовок ...

1 Ответ

4 голосов
/ 13 июля 2011

Фильтр преобразования matrix, который вы используете, может вращаться на любой угол, поэтому вы можете использовать его для поворота на 270 градусов, если хотите.У него есть некоторые причуды, но это работает.Это просто позор, что математика математике так больно.Эта статья дает очень хороший обзор того, как работать с углами: http://www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/

Но если вы специально хотите повернуть на 270 градусов, вам не нужно использовать (откровенно отвратительный) matrixфильтр, потому что IE также имеет гораздо более дружественный BasicImage фильтр.

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

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

Фильтр BasicImage полезен, только если вы хотите вращаться с кратностью 90градусов.Что-нибудь еще, и вам нужно сделать матричное преобразование.

rotation=3 говорит ему повернуть на 90 градусов, 3 раза - то есть на 270 градусов.

Надеюсь, что поможет.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...