CSS 3D Rotate Behaving Differently in Firefox and Edge Browsers. How Can I Correct This?

Hello all,

First things first, here’s my share link:

I’m currently in the process of building a small, personal website and I want some artwork to rotate much like the card in this Webflow tutorial does:

I’ve succeeded in doing this and the animation looks great in Chrome, but it’s being rendered very differently in Firefox and Edge. The effect is present, but so subtle that it’s almost unnoticeable, and changing the child perspective setting on the “Art 1” section has had no effect on that behavior in Firefox or Edge.

It seems odd to me that a 3d-rotation created with Webflow’s designer would only work properly when viewed in Chrome.

Is this something I can fix so that it looks right in other modern browsers, or will I have to ditch the animation altogether?

Thank you in advance for any assistance you may be able to provide!

Kind regards,