0

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

PanBou
  • 41
  • 1
  • 8

1 Answers1

1

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

myst1c
  • 593
  • 3
  • 13
  • I tried @keyframes solution adding 4 percentage steps but still the same – PanBou Aug 17 '17 at 06:37
  • Also, i tried to just rotate without scaling and still rotation cannot happen in IE11 – PanBou Aug 17 '17 at 08:24
  • There is a workaround, but must be done in JavaScript here is the example you need: https://codepen.io/myst1c/pen/bravZM – myst1c Aug 17 '17 at 12:13
  • This is really strange. When i try something in codepen or in jsfiddle, its working on IE11. When i try to site is not. Notice that i use editor in a Sharepoint website in case that matters. – PanBou Aug 18 '17 at 05:35
  • I'm not understanding. Where are you coding? Can you consider this the right answer since i was able to show how it's done? – myst1c Aug 18 '17 at 09:49