CODEWITHSUNDEEP
css
PanBou
PanBou

Reputation: 41

Rotate and scale does not work in IE11

In my css i use the following code to rotate and scale on hover:

.myclass:hover img {
-ms-transform: scale(1.1) rotate(-20deg);
-webkit-transform: scale(1.1) rotate(-20deg);
-moz-transform: scale(1.1) rotate(-20deg);
transform: scale(1.1) rotate(-20deg);
}

This code works on Chrome but not on IE11. Any help?

Thank you in advance

Upvotes: 0

Views: 4727

Answers (1)

myst1c
myst1c

Reputation: 603

I was having this same problem in IE 11, I could realize that if I reduce the time of the animation could works (ex. 0.3s). But that wasn't a solution for me.

While I was reading How to fix shaking CSS transitions in Firefox: https://gielberkers.com/how-to-fix-shaking-css-transitions-in-firefox/ I found one solution (for Firefox), and I thought that could work the same concept for IE.

The idea is rotate (the minimum possible) the div or image while your making the scale. Just like this:

  @keyframes loading
  0%
    transform: scale(1);
  50%
    transform: scale(1.2) rotate(0.02deg);
  100%
    transform: scale(1);

I made this trick and works in IE 11

Upvotes: 1

Related Questions