通過css旋轉圖像，但裁剪它總是相同的正方形

Question

我想旋轉和放大圖片在這裏的效果 http://cpband.itvp.eu/ ，但我想讓他們在同一個盒子裏。 like here http://cpband.itvp.eu/test.php

把戲應該在 overflow：hidden; ，但我無法想出如何使其工作。

感謝您的提示！

Answer 1

您可以旋轉添加到容器：

.pic { 
 
    overflow: hidden; 
 
} 
 

 
.grow img, .grow { 
 
    height: 300px; 
 
    width: 300px; 
 
    
 
    -webkit-transition: all 1s ease; 
 
    -moz-transition: all 1s ease; 
 
     -o-transition: all 1s ease; 
 
     -ms-transition: all 1s ease; 
 
      transition: all 1s ease; 
 
} 
 
.grow:hover { 
 
    transform:rotate(15deg); 
 
} 
 
.grow:hover img { 
 
    width: 400px; 
 
    height: 400px; 
 
} 
 

 

 
/* DEMO PURPOSE */ 
 
html { 
 
    height:100%; 
 
    display:flex; 
 
    align-items:center; 
 
    justify-content:center; 
 
    }

<div class="grow pic"> 
 
    <img src="http://lorempixel.com/400/400/people/9" alt="portrait"> 
 
</div>

或僅僅是形象？ 另外，變換既可以做（變焦&旋轉）

.pic { 
 
    overflow: hidden; 
 
} 
 

 
.grow img, .grow { 
 
    height: 300px; 
 
    width: 300px; 
 
    
 
    -webkit-transition: all 1s ease; 
 
    -moz-transition: all 1s ease; 
 
     -o-transition: all 1s ease; 
 
     -ms-transition: all 1s ease; 
 
      transition: all 1s ease; 
 
} 
 

 
.grow:hover img { 
 
    transform:rotate(15deg) scale(1.25); 
 
} 
 

 

 
/* DEMO PURPOSE */ 
 
html { 
 
    height:100%; 
 
    display:flex; 
 
    align-items:center; 
 
    justify-content:center; 
 
    }

<div class="grow pic"> 
 
    <img src="http://lorempixel.com/400/400/people/9" alt="portrait"> 
 
</div>

Answer 2

HTML：

<div id="container"> 
<img src="picture.jpg" id="picture" /> 
</div> 

的CSS：

#container{ 
overflow:hidden; 
width:100px; 
height:100px; 
} 
#picture{ 
height:300px; 
width:300px; 
}