通過90度轉動圖像，絕對位置在div內

代碼是非常在這個階段很基本的，但本質上這裏是CSS：

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

的想法是讓圖像精確地坐在div內，然後用5px的邊距浮動它。因此，它看起來像這樣：

enter image description here

來源

2011-07-06 422

爲什麼要經歷所有麻煩並旋轉實際圖像開始？ – epascarello

你有投票嗎？ – 422

你見過這個[jQuery插件]（http://code.google.com/p/jquery-rotate/）嗎？在這種情況下可能會有用。編輯：錯誤的鏈接，我其實意味着這一個：http://code.google.com/p/jqueryrotate/ – aroth

嘗試增加這標誌：Explorer 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

謝謝。我做的是頂級而非積極的argghhh乾杯 – 422

解釋爲什麼這些數字有效很重要。尤其是如果圖像尺寸改變，如OP所述。 –

工程很好，但仍然採用主頁的定位...不知道爲什麼，我的嵌套是乾淨的。正如你可以從你的小提琴看到的 – 422

只要給#logo a如果你想這樣做的話，它的位置的頂部和左側的值http://jsfiddle.net/mnmc7/13/

來源

2011-07-06 01:57:11 kinakuta

我有的問題是它自己絕對位於頁面頂部，但我已經正確嵌套，所以更改爲相對 – 422

如果要相對於其父元素進行定位，只需添加position：相對於父元素。絕對定位將相對於最近的定位父親進行定位。 – kinakuta

現在我感到困惑。父div（按示例）位於頁面中，沒有相對或絕對定位。所以孩子div（是標誌）只是不玩球... – 422

通過90度轉動圖像，絕對位置在div內

回答

相關問題