CSS3 实现鼠标移到图片上放大

html

<div class="container">
  <img src="http://www.w3school.com.cn/i/eg_tulip.jpg" alt="">
</div>

css

.container {
    width: 200px;
    height: 200px;
    border: 4px solid lightpink;
    overflow: hidden;
}
.container img {
    height: 100%;
    transition: all 0.3s;
    background: yellow;
}
.container:hover img {
    transform: scale(1.1);
}

另记：transform: rotate(180deg) 这个属性值在行内元素上不起作用