スケーリングとの国境の内側に画像を回転

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>