此代码在Mac OS X(http://jsfiddle.net/hfmhecmw/3/)上的Chrome / Firefox / Safari / Opera中运行良好:
<div class="container">
<img class="image" src="http://s29.postimg.org/fu0492g7r/lotus_flowers_wallpaper_hd_25.jpg"/>
</div>
.container {
display: inline-block;
width: 320px;
height: 200px;
overflow: hidden;
}
.image {
width: 320px;
height: 200px;
-webkit-transition: -webkit-transform 0.4s;
transition: transform 0.4s;
}
.container:hover .image {
-webkit-transform: scale(1.15);
-ms-transform: scale(1.15);
transform: scale(1.15);
}
但是存在一个问题:Windows 8.1 / IE11在图像缩放时,它是:模糊,向左移动1px并且有类似1px边框的东西。
有没有办法让这个动画像Chrome一样流畅?或者IE 11是正常的吗?