익스에서 scale 떨림

ie에서 scale효과가 떨려보이는 걸 rotate로 개선한 방법입니다.

<div class="before">
  <div class="bg"></div>
</div>

<div class="after">
  <div class="bg"></div>
</div>

 

.bg {
  padding-top: 56.25%;
  background: url('https://picsum.photos/300/300') no-repeat 0 0 / cover;
  transform: scale(.9);
  transition: all .2s;
}

.before {
  width: 300px;
}

.before:hover .bg {
  transform: scale(1.1);
  transition: all 2s;
}

.after {
  width: 300px;
}

.after:hover .bg {
  transform: scale(1.1) rotate(.001deg);
  transition: all 2s;
}

 

jsfiddle에서 보기

https://jsfiddle.net/hyuckjin/u8kmnsgd/