2011-07-13 24 views
2

私はStack Overflowでいくつかの記事を読んで、グーグルをしていますが、実際には何も見ていません。IE6でテキストを270度回転する

私はh2を持っています。すべてのブラウザとIE6/7に270度回転したいです。すべてのブラウザ、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を回転させます私が望むように。

私は疲れました& w/oズーム:1;私はアイデアが不足しています。いずれにしても、ie6で回転するテキストをよく把握していますか?画像の回転などに関する記事はたくさんありますが、テキストはあまりありませんが、同じ画像または見出しになると思いました...

+1

90度回転させることができれば、-90度にするとどうなりますか? – Sparky

+0

私のIE6のコピーで動作するようです。 – Dereleased

+0

あなたの質問のタイトルは、あなたがIE6ユーザーだけでいたずらを引っ張っているように聞こえます。 – BoltClock

答えて

4

matrix使用している変換フィルタは任意の角度で回転できます必要に応じてこれを使用して270度に回転することができます。いくつかの癖がありますが、うまくいきます。行列の数学がとても苦痛なのは残念です。この記事では、角度を操作する方法の非常に良い概観います:http://www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/

をしかし、あなたは、特に270度回転する場合は、IEにも持っているので、(率直に醜い)matrixフィルタを使用する必要はありません。はるかにフレンドリーなBasicImageフィルター。

これを試してください:あなたは90度の倍数で回転させたい場合は

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

BasicImageフィルタにのみ有効です。それ以外の場合は、行列変換を行う必要があります。

rotation=3は、90度、3回、すなわち270度回転するように指示します。

希望に役立ちます。

+0

+1すべて正しいです。 –