旋轉圖像內的圖像

我有兩個圖像：一個應該像是一個邊框，它會在懸停時旋轉，另一個應該在旋轉的第一個圖像內。如何將第二個圖像放入內部？第一這是我的代碼的jsfiddle ...旋轉圖像內的圖像

<div class="col-xs-4" style="text-align:center;margin-top:20px;background:black;">    
    <img class="img-responsive rotate" src="http://s21.postimg.org/s70s6ioyb/Okvir_rotirajuci.png" style="display:inline-block;"/>   
    <img class="img-responsive" src="http://s23.postimg.org/d0uos0jvb/E_mail.png" style="display:inline-block;"/>   
</div>

我的CSS ...

.rotate{ 
    -moz-transition: all 0.6s ease-in-out; 
    -webkit-transition: all 0.6s ease-in-out; 
    -o-transition: all 0.6s ease-in-out; 
    -ms-transition: all 0.6s ease-in-out; 
    transition: all 0.6s ease-in-out; 
} 
.rotate:hover { 
    -moz-transform: rotate(360deg); 
    -webkit-transform: rotate(360deg); 
    -o-transform: rotate(360deg); 
    -ms-transform: rotate(360deg); 
    transform: rotate(360deg); 
}

JSFIDDLE

來源

2014-06-05 Shile

這將做到這一點：

將圖像包裝在inline-block div中。從兩幅圖像中刪除inline-block風格。製作第一張圖片position:absolute，這會將其強加到第二張圖片上。單獨留下第二個圖像的樣式，img元素默認顯示：內聯，這是我們想要的。

看到我更新到你的提琴 http://jsfiddle.net/T8Pjh/17/

<div class="col-xs-4" style="text-align:center;margin-top:20px;background:black;position:relative;"> 
    <div style=display:inline-block;> 
     <img class="img-responsive rotate" src="http://s21.postimg.org/s70s6ioyb/Okvir_rotirajuci.png" style="position:absolute;" /> 
     <img class="img-responsive" src="http://s23.postimg.org/d0uos0jvb/E_mail.png" /> 
    </div> 
</div>

來源

2014-06-05 23:02:35 chiliNUT

是的，這是它...但是，這不是這等image.How內相當集中的電子郵件圖像可以做呢？ – Shile

這似乎沒有準確響應。 – showdev

我注意到了。如果您仔細檢查圖像，請回頭看看原始小提琴http://jsfiddle.net/T8Pjh/15/並在您的瀏覽器中點擊全選，注意您的「盒子」圖像不居中，但電子郵件圖像是，這是造成差距 – chiliNUT

我不得不用了幾個嵌套元素來實現三個目標：

紡紗邊框和信封圖標重疊和對齊在一起。
圖像對水平居中。
圖像對大小是響應。

說明

元件div.image_wrap是提供用於兩個圖像的容器的div.container居中的孩子。它的寬度是div.container的100％，但不超過42像素（圖像的寬度）。

元素div.image_height_prop給出div.image_wrap（因此爲div.container）的高度。由於內部圖像絕對定位（以便它們重疊），因此它們沒有高度，並且不會支撐它們的容器。 div.image_height_prop已將其padding-top設置爲其父母寬度的100％，實質上製作了響應性方形支撐。

圖像完全位於另一個之上，「邊框」位於DOM的最後，因此它將位於堆疊順序之上（懸停）。

HTML

<div class="col-xs-4 container"> 
    <div class="image_wrap"> 
     <div class="image_height_prop">    
      <img class="icon" src="http://s23.postimg.org/d0uos0jvb/E_mail.png" /> 
      <img class="rotate" src="http://s27.postimg.org/x4d8qxe73/square.png" /> 
     </div> 
    </div> 
</div>

CSS

div.container { 
    text-align:center; 
    background:black; 
    margin-top:20px; 
} 
div.image_wrap {  
    display:inline-block; 
    max-width:42px; 
    width:100%; 
} 
div.image_height_prop { 
    position:relative;  
    width:100%; 
    padding-top:100%; 
    height:0; 
} 
div.image_wrap img { 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
} 

img.rotate { 
    -moz-transition: all 0.6s ease-in-out; 
    -webkit-transition: all 0.6s ease-in-out; 
    -o-transition: all 0.6s ease-in-out; 
    -ms-transition: all 0.6s ease-in-out; 
    transition: all 0.6s ease-in-out; 
} 
img.rotate:hover { 
    -moz-transform: rotate(360deg); 
    -webkit-transform: rotate(360deg); 
    -o-transform: rotate(360deg); 
    -ms-transform: rotate(360deg); 
    transform: rotate(360deg); 
}

Working Example

正如@chiliNUT提到，在「邊框」圖像框是偏離中心。我將圖片居中並重新上傳。作爲一種替代方法，您可以在「信封」圖像上添加1px的左邊距以調整偏離中心的方框。

img.rotate { 
    margin-left:1px; 
}

An example of that

來源

2014-06-06 18:17:24 showdev

旋轉圖像內的圖像

回答

相關問題