CSS-transform in Edge not working as intended - html

Question

I have an svg illustration of a drone and I want the propellers to be rotating. The animation works perfectly fine in Chrome and Firefox but in Edge the rotation center is weird. It probably has to do with the transform-origin: center property but I have no idea how to correct it because it does work in Firefox/Chrome.
.drone .body {
fill: #000000;
}
.drone .wing {
fill: #000000;
animation: wing 5s linear forwards infinite;
transform-box: fill-box;
transform-origin: center;
}
#keyframes wing {
100% {
transform: rotateY(7200deg);
}
}
<svg id="drone1" class="drone" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1923 643" preserveAspectRatio="xMinYMin meet">
<g id="drone1-droneContainer">
<g class="wing left">
<path d="M13,2c-0.6,0-1-0.4-1-1s0.4-1,1-1s8,0.4,8,1S13.6,2,13,2z"/>
<path d="M8,2C7.4,2,0,1.6,0,1s7.4-1,8-1s1,0.4,1,1S8.6,2,8,2z"/>
</g>
<g class="wing right">
<path d="M48,2c-0.6,0-1-0.4-1-1s0.4-1,1-1s8,0.4,8,1S48.6,2,48,2z"/>
<path d="M43,2c-0.6,0-8-0.4-8-1s7.4-1,8-1s1,0.4,1,1S43.6,2,43,2z"/>
</g>
<g class="body">
<path d="M45,0.5C45,0.2,45.2,0,45.5,0S46,0.2,46,0.5V4c0.6,0,1,0.4,1,1v1h0.5C48.3,6,49,6.7,49,7.5S48.3,9,47.5,9H37v0.9
c0,0.7-0.4,1.4-1,1.7l-3.6,2.1c-0.3,0.2-0.7,0.3-1,0.3h-6.9c-0.4,0-0.7-0.1-1-0.3L20,11.6c-0.6-0.4-1-1-1-1.7V9H8.5
C7.7,9,7,8.3,7,7.5S7.7,6,8.5,6H9V5c0-0.6,0.4-1,1-1V0.5C10,0.2,10.2,0,10.5,0C10.8,0,11,0.2,11,0.5V4c0.6,0,1,0.4,1,1v1h7l0,0
c0.1-0.6,0.4-1.2,1-1.6l3.6-2.1c0.3-0.2,0.7-0.3,1-0.3h6.9c0.4,0,0.7,0.1,1,0.3L36,4.4C36.6,4.8,37,5.3,37,6l7,0V5
c0-0.6,0.4-1,1-1V0.5z"/>
</g>
</g>
</svg>

Answer 1

The issue is with transform-box. This is an experimental CSS property which is not supported by Microsoft Edge.
I didn't find workaround for transform-box on Microsoft Edge, so I can only give you a suggestion to replace the svg with gif picture on Microsoft Edge like this:
.drone .body {
fill: #000000;
}
.drone .wing {
fill: #000000;
animation: wing 5s linear forwards infinite;
transform-box: fill-box;
transform-origin: center;
}
#keyframes wing {
100% {
transform: rotateY(7200deg);
}
}
#supports (-ms-ime-align: auto) {
/* Edge 12+ CSS styles go here */
#pic {
display: block;
}
#drone1 {
display: none;
}
}
#media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
/* Chrome 29+ CSS styles go here */
#pic {
display: none;
}
#drone1 {
display: block;
}
}
<img id="pic" src="https://i.stack.imgur.com/9yOqm.gif" />
<svg id="drone1" class="drone" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1923 643" preserveAspectRatio="xMinYMin meet">
<g id="drone1-droneContainer">
<g class="wing left">
<path d="M13,2c-0.6,0-1-0.4-1-1s0.4-1,1-1s8,0.4,8,1S13.6,2,13,2z" />
<path d="M8,2C7.4,2,0,1.6,0,1s7.4-1,8-1s1,0.4,1,1S8.6,2,8,2z" />
</g>
<g class="wing right">
<path d="M48,2c-0.6,0-1-0.4-1-1s0.4-1,1-1s8,0.4,8,1S48.6,2,48,2z" />
<path d="M43,2c-0.6,0-8-0.4-8-1s7.4-1,8-1s1,0.4,1,1S43.6,2,43,2z" />
</g>
<g class="body">
<path d="M45,0.5C45,0.2,45.2,0,45.5,0S46,0.2,46,0.5V4c0.6,0,1,0.4,1,1v1h0.5C48.3,6,49,6.7,49,7.5S48.3,9,47.5,9H37v0.9
c0,0.7-0.4,1.4-1,1.7l-3.6,2.1c-0.3,0.2-0.7,0.3-1,0.3h-6.9c-0.4,0-0.7-0.1-1-0.3L20,11.6c-0.6-0.4-1-1-1-1.7V9H8.5
C7.7,9,7,8.3,7,7.5S7.7,6,8.5,6H9V5c0-0.6,0.4-1,1-1V0.5C10,0.2,10.2,0,10.5,0C10.8,0,11,0.2,11,0.5V4c0.6,0,1,0.4,1,1v1h7l0,0
c0.1-0.6,0.4-1.2,1-1.6l3.6-2.1c0.3-0.2,0.7-0.3,1-0.3h6.9c0.4,0,0.7,0.1,1,0.3L36,4.4C36.6,4.8,37,5.3,37,6l7,0V5
c0-0.6,0.4-1,1-1V0.5z" />
</g>
</g>
</svg>

Answer 2

What version is your edge browser? Transform-Origin should be supported
Another way for you to fix this, might be the use of cssSandpaper