Strange css transform animation on MS edge

Question

I made a tile animation to flip my tile with a button.
It's working on Chrome, Safari, but in MS Edge browser, flip animation appear strange.

I just want an y-rotation and not a rotation-like as in Edge.

You can find my code behind and example to show my problem on MS Edge.

Does any one has an idea to fix Edge behaviour ?

EDIT : I suppose it's not a problem with transform-style:preserve-3D compatibility because it's Edge compatible.

document.getElementById("btn-front").addEventListener("click", function(){
  document.getElementById("flip").className = "flipped";
});

document.getElementById("btn-back").addEventListener("click", function(){
  document.getElementById("flip").className = "";
});

#flip {
  transform-style: preserve-3d;
  transition: transform 1s;
  transform: translate3d(0, 0, 0);
  transform-origin: 150px 150px 0;
}
#front {
  background-color: red;
  transform: translate3d(0px, 0px, 2px);
}
#back {
  background-color: green;
  transform: translate3d(0px, 0px, 1px) rotateY(180deg);
}
.tile {
  height: 200px;
  width: 200px;
  position: absolute;
  top: 50px;
  left: 50px;
  backface-visibility: hidden;
}
.button {
  height: 30px;
  width: 100px;
  margin: 75px 50px;
}
#flip.flipped {
  transform: translate3d(0, 0, 0) rotateY(-180deg);
}

<div id="flip">
  <div id="front" class="tile">
    <button id="btn-front" class="button">Go to back</button>
  </div>
  <div id="back" class="tile">
    <button id="btn-back" class="button">Go to front</button>
  </div>
</div>

Check this: http://stackoverflow.com/questions/30919489/preserve-3d-not-working-on-ie11 — Dekel, Nov 23 '16 at 11:46
@Dekel : Thanks but it's not the same problem because "transform-style:preserve-3D" is supposed to be Edge compatible : https://msdn.microsoft.com/fr-fr/library/hh772282(v=vs.85).aspx — Geoffrey Lalloué, Nov 23 '16 at 13:59

Michael Hernández · Accepted Answer · 2016-11-23T16:31:26.320

1

The problem is in that block:

#flip {
transform-style: preserve-3d;
transition: transform 1s;
transform: translate3d(0, 0, 0);
transform-origin: 150px 150px 0;
}

If you change the property transform: "translate3d(0, 0, 0);" to transform: translate3d(0, 0, 1) it will work fine.

edited Nov 23 '16 at 16:31

answered Nov 23 '16 at 13:50

Michael Hernández

81
3

Hernandez : Your answer is right, but i need to use translate3d to use graphic hardware acceleration. Translate2d do not use hardware acceleration. The reason is : My web app is a Cordova application and is running on mobile phones. Source : https://davidwalsh.name/translate3d – Geoffrey Lalloué Nov 23 '16 at 14:11
#flip { transform-style: preserve-3d; transition: transform 1s; transform: translate3d(0, 0, 0); transform-origin: 150px 150px 0; } – Michael Hernández Nov 23 '16 at 15:51
If you change from: #flip { transform-style: preserve-3d; transition: transform 1s; transform: translate3d(0, 0, 0); transform-origin: 150px 150px 0; } to #flip { transform-style: preserve-3d; transition: transform 1s; transform: translate3d(0, 0, 1); transform-origin: 150px 150px 0; }, it will work fine. – Michael Hernández Nov 23 '16 at 15:52
o_O just this small "1" ... Thanks @Michael Hernández, that is right ! I will let you modify your answer and I will validate it – Geoffrey Lalloué Nov 23 '16 at 16:06

Strange css transform animation on MS edge

1 Answers1