Hey everyone!
I’ve been scratching my head with this one! I’ve set up the 3D perspective in my project. Everything looks fine in the preview when I interact with the card. But on the published site the 3D perspective stops working. What’s going on?
Any help would be amazing! Thanks!
Here is my public share link: LINK
Here is the published link: LINK
(how to access public share link)
I think it MIGHT have something to do with the background blur effect that I’m using. I’m applying it in the custom code. I’m really not sure but that’s the only difference I can see.
Is this some sort of bug? When I’m using this custom code, the 3D effect is disabled…
<style>
.glasscard {
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
}
</style>
Okay I sort of found a work around! When using the css backdrop blur properties on a DIV, it for some reason disables the 3D perspective. So my solution is to stack another div behind my card that has the exact same interaction and apply the blurring effect to that. This allows me to have my 3D perspective while having my frosted glass blur effect!