縮放和邊框

Question

我想知道當你將鼠標懸停在圖片的可能發生內部旋轉圖像：但是http://stylemixthemes.com/demo/cinderellawp

我知道轉型代碼可以擴展，使圖像旋轉的， ，我想不出讓圖像在邊框內旋轉和縮放的方法。

預先感謝您！

Answer 1

只需在圖像容器元素上設置overflow:hidden，以使旋轉/縮放圖像的溢出消失。

例子：

.image_container { 
 
    overflow:hidden; 
 
    padding:5px; 
 
    border:1px solid #000000; 
 
    width:480px; 
 
    height:270px; 
 
} 
 

 
.image_container img:hover { 
 
    -webkit-transform:rotate(5deg) scale(1.05); 
 
    -ms-transform:rotate(5deg) scale(1.05); 
 
    transform:rotate(5deg) scale(1.05); 
 
}

<div class="image_container"> 
 
    <img src="http://dummy-images.com/abstract/dummy-480x270-Bottles.jpg" /> 
 
</div>