Encountering a peculiar issue with MS Edge involving the animation of a door (a div tag) around the Y axis using the css rotateY() function in combination with perspective properties. The problem arises when transitioning an angle from a positive value to a negative value (50deg => -100deg), causing a glitch near zero.
For a simplified version of the code, visit: https://codepen.io/stephanemill/pen/LYGowqo - Microsoft Edge 44.18362.449.0
.wrapper {
margin-left: 200px;
perspective: 500px;
perspective-origin: 0% 0%;
}
.flip {
width: 100px;
height: 200px;
background: gold;
transition: transform 4s;
transform-origin: 0px 0px;
transform: rotateY(50deg);
}
.flip:hover {
transform: rotateY(-100deg);
}
The glitch may not be easily noticeable but can become more pronounced based on the context.
After extensive testing, it has been identified that:
- -the issue is not related to hover effects
- -the bug disappears when removing perspective properties
- -the bug disappears when interpolating from -3deg to -100deg