CSSとIEでテキストを回転する

Question

CSSでテキストを回転させる必要があります。私は以下のスタイルルールを持っていますが、Internet Explorerで動作するようには見えません。

.footer #descr span { 
    -moz-transform: rotate(-20deg); /* Firefox */ 
    -o-transform: rotate(-20deg); /* Opera */ 
    -webkit-transform: rotate(-20deg); /* Safari y Chrome */ 
    transform: rotate(-20deg); /* Safari y Chrome */ 
    font-size:40px; 
    display:block; 
    float: left; 
    margin: 0 10px 0 0; 
} 

CSSでIEのテキストを回転するにはどうすればよいですか？ IEの

Answer 1

古いバージョン（8以下）はCSS3をサポートしていません

Answer 2

IEはCSS3.Theソリューションの一部の機能をサポートしていません：それはIEで正常に低下させ、近代的なブラウザを持つ人々は、現代のウェブサイトを楽しむことができます。

Answer 3

あなたはCSS変換のためのポリフィルあるCSSのサンドペーパー、使用する必要がありますIE < 9でこの作業を取得するには：IE9以下http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/

Answer 4

を、Internet Explorerが効果的にCSS3のための作り付けのサポートをゼロまたは任意の他のましたSVGのような標準の Webテクノロジーを使用すると、希望どおりにテキストクロスプラットフォームを回転させることができます。 MicrosoftはIE6以降の要素（例えばテキスト）を回転の二つの方法が含まれていた、しかしもっと簡単な方法はそうのように、90度に刻みで動作します。

-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)"; /* 0=0, 1=90, 2=180, 3=270 */ 

あなたが本当に340/-20その度を達成するために必要がある場合あなたの例に含まれている場合は、ここで文書化されているより困難なものを手で試す必要があります：MSDN Matrix Filter。どのように不必要に複雑に見えるかを考えると、すばらしいGoogle検索では-ms-filter CSSルールが生成される素晴らしい電卓が明らかになりました：Matrix Calculator。

これらの機能は両方とも、私が代わりに-ms-transformをサポートしているIE9では推奨されなくなることを覚えておいてください。マイクロソフトが非推奨として非推奨としているかどうかに応じて、IE9がテキストを2度回転していないことを確認することができます。

.footer #descr span { 
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.93969262, M12=0.34202014, M21=-0.34202014, M22=0.93969262,sizingMethod='auto expand')"; /* IE6-8 */ 
    -ms-transform: rotate(-20deg); /* IE9+ */ 
    -moz-transform: rotate(-20deg); /* Firefox */ 
    -o-transform: rotate(-20deg); /* Opera */ 
    -webkit-transform: rotate(-20deg); /* Safari & Chrome */ 
    transform: rotate(-20deg); 
    font-size:40px; 
    display:block; 
    float: left; 
    margin: 0 10px 0 0; 
} 

あなたはHTML5および/またはCSS3を利用するように意図されている場合は、その後、私はJavaScriptを介して、CSS3のライブラリを含むことは賢明であろうとDuopixelの答えに同意するだろう、しかし完全に正直に言うと。 Windows XPのユーザーがIE8を超えてアップグレードすることができない場合、商用サイトであればそれをサポートすることをお勧めします。私の状況のた​​めに働い

Answer 5

唯一のことは、CSSサンドペーパーを使用していた - 私はその統合された後、私は...

#vertbar p.name { 
    -sand-transform: rotate(180deg); 
} 

と出来上がりを以下のCSSコードを試してみました！ IEはテキストを垂直方向に回転させ、下から上へと読む。ただし、他のすべてのブラウザでは、この方向は270度と見なされます。 IE座標系は、バック・ツー・フロントであるかのように

は、私は今、私は「考え

（私は驚かないだろう...）、IEに異なる角度でのテキストを回転させ、他のブラウザを持っていましたd -sand-transformルールをIEブラウザにのみ提供する条件付きコメントを試してください。何らかの理由でIEはこれを無視してローテーションが適用されなくなった（IE10は条件付きコメントを無視しますか？）

これですべてのブラウザに同じようになるという問題がありました。ルールの順番を変更し、IEと180度を設定すると、Firefox、Chrome、Safari、IEでは、下から上に向かってテキストを垂直に回転させるCSSルールが完成しました。

#vertbar p.name { 
    -sand-transform: rotate(180deg); 
    -webkit-transform: rotate(270deg) !important; 
    -moz-transform: rotate(270deg) !important; 
    -o-transform: rotate(270deg) !important; 

    font-size: 14px; 
    text-transform: capitalize; 
    display: block; 
    white-space: nowrap; 
    height: 330px; 
    text-align: left; 
    color: #FFF; 
    line-height: 40px; 
    margin-top: 0px; 
} 

ハレイ！うまくいけば、これは誰かに助けになる、私はこのソートを取得しようと2時間以上を無駄にした。 ：P

更新：すべてのブラウザで270度270度です。私は、180度の第2のルールに追加された90度の回転を持つ別のルールがあることを発見しました。合計270を与えるようになったので、回転値が相対値（追加？絶対の。

Answer 6

これはIEのために働く：回答を

-ms-transform: rotate(-20deg);