缩放和旋转边框内的图像

Question

我想知道当您将鼠标悬停在图片上时会发生这种情况：http://stylemixthemes.com/demo/cinderellawp

我知道转换代码可以缩放并使图像旋转，但是，我想不出一种方法可以使图像在边框内旋转和缩放。

提前谢谢！

Answer 1

只需在图像容器元素上设置std::cout << this->operator[](0); 即可使旋转/缩放图像的溢出消失。

示例：

＆＃13;

＆＃13;

overflow:hidden

＆＃13;

.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);
}

＆＃13;

＆＃13;

＆＃13;