变换旋转和改变宽度时的图像模糊

Question

这是我尝试做的例子： https://jsfiddle.net/51cbw1g5/ HTML：

 <img src="http://test.grey-cat.biz/assets/images/logo-study.png">

CSS：

  img {
  transition: all 0.3s ease 0s;
  width: 143px;
  display: block;
  position: relative;
  float: left;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

img:hover {
  width: 100px;
    -moz-transform: rotate(16deg);
    -ms-transform: rotate(16deg); 
    -webkit-transform: rotate(16deg); 
    -o-transform: rotate(16deg);
    transform: rotate(16deg);
}

在悬停图像模糊时，我该如何解决？