Geoffrey Lalloué Geoffrey Lalloué - 9 days ago 7
Javascript Question

Strange css transform animation on MS edge

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>




Answer

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.

Comments