Mouseover X/Y Perspective Rotation Issue

Hey everyone! I’m having a strange issue that I can’t seem to troubleshoot.

I’m building a portfolio site and on both the homepage and the work page I have a grid of “cards” that rotate along the X and Y axes in perspective while mousing over them. I followed the tutorial here to build these.

I have my Animation Resting States for both animations set to 50%, 50% (dead center), but when I mouseout, the cards are very slightly askew still as shown in the attached screenshot. Changing the perspective depth of the parent element (the respective grids) to a lesser number exaggerates this incorrect resting rotation.

Sometimes, upon initial page load, all the cards are (correctly) straight until I mouseover and then show incorrect resting states upon mouseout. Sometimes they’re askew from page load.

I’ve racked my brain but I can’t seem to figure it out. Can someone please help? Thank you!

Read-only here | Live site: danportfolio2.webflow.io