イメージを90度回転させてdiv内に絶対配置してください

コードは、この段階では非常に非常に基本的なものですが、基本的にここにCSSです：

<div class="Box"> 
           <div id="Logo"> 
            <img src="http://images.domain.com.au/img/Agencys/16067/logo_16067.GIF" width="130px"> 
           </div> 
          </div>

考え方は、以下のとおりです。ここ

.Box { 
    width:660px; 
    border: 1px solid #aaaaaa; 
    border-radius: 3px 3px 3px 3px; 
    height:140px; 
} 
#Logo { 
    position:absolute; 
    -moz-transform:rotate(270deg); 
    transform:rotate(270deg); 
    -webkit-transform:rotate(270deg); 
    -ms-transform:rotate(270deg); 
    -o-transform: rotate(270deg); 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); 
    z-index:inherit; 
    zoom:1; 
}

は、これまでのhtmlですdivに正確に座るように画像を取得し、5pxのマージンで左に浮かべてください。それはこのようになりますように：

enter image description here

出典

2011-07-06 422

なぜ実際にすべての問題を解決し、実際のイメージを回転させるのですか？ – epascarello

あなたはこれを投票しましたか？ – 422

この[jQuery plugin]（http://code.google.com/p/jquery-rotate/）を見たことがありますか？この場合、役に立つかもしれません。編集：誤ったリンク、私は実際にこれを意味：http://code.google.com/p/jqueryrotate/ – aroth

ロゴにこれを追加してみてください：エクスプローラー9インターネットでも

position:relative; 
float:left; 
top:43px; 
left:-33px;

彼らはあなたが回転= 4

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

を使用したい表示されます

http://jsfiddle.net/AlienWebguy/mnmc7/21/

出典

2011-07-06 01:56:01 AlienWebguy

ありがとうございます。私は肯定的な肯定的な歓喜よりもむしろトップをしていた – 422

なぜこれらの数字が働くのかを説明することが重要です。特に、OPによって指摘されるように、画像の寸法が変化する場合。 –

素晴らしい作品ですが、まだメインページの配置を採用しています...私の入れ子はきれいです。あなたのフィドルから見ることができます – 422

#logo aこのようにしたい場合は、その位置の左上の値を指定します。http://jsfiddle.net/mnmc7/13/

出典

2011-07-06 01:57:11 kinakuta

問題は、ページの一番上に絶対位置を置いていますが、正しく入れ子にしています。 relative – 422

親要素の相対位置を設定する場合は、親に対して相対的なposition：を追加します。絶対配置は、最も近い位置に配置された親に対して配置されます。 – kinakuta

今私は混乱しています。親div（例のように）は相対的または絶対的な位置決めなしでページに配置されます。だから子供のdiv（ロゴである）は、ボールを再生するisnt ... – 422

イメージを90度回転させてdiv内に絶対配置してください

答えて

関連する問題