CSS Rotate IE7と8

Question

私はさらに別の質問をするつもりです！

したがって、CSS Rotateはie9で動作しますが、以前のバージョンで動作する回転を取得することは私の死になるでしょう！

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

このコード行は、要素を90度回転させますが、他のブラウザと同じ起点を基準にしています。要素がページの側面に近すぎると、要素が外側に回転することがあります。 MicrosoftのIEドキュメントでは、変換元の設定方法を明確にしていません。

私の完全なコードは次のとおりです。

#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); 

} 

私たちは9と同じようにIE 7と8のハンドル回転をするために行うことができるものはありますか？

ありがとうございました。

私！

Answer 1

IE5.5、IE6、IE7およびIE8がサポートされています。filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); IE5はサポートしていません。

Source

ちょうどあなたの要素の位置を変更しMatrixフィルタを使用してDXフィルタを使用して回転原点を変更するには。 1つの要素に複数のフィルタを含めることができます。あなたは少しの計算をする必要があります。それと幸運！

Answer 2

this siteの左側にあるタイトルをご覧ください。私はoverflow:visibleという小さな要素にアイテムを置き、その要素を回転させることで回転ポイントの問題を解決しました。つまり、私は自分のピボットポイントを作った。

この例では、フィルタを使用するとフォントスムージングが無効になるため、IEでテキストを回転するためにwriting-modeも使用します。あなたはjQueryのをしようとして検討する必要があります

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