I've been working on a 3D hover effect and my code is functioning properly in Opera and Chrome, but for some reason it's not working in Firefox. I've even attempted using vendor prefixes, but to no avail. The strange thing is that when I remove the anchor tag from my HTML, the code works perfectly in all browsers. However, I do need that anchor tag and with it, the effect fails to work in Firefox.
.wrapper {
width: 50vw;
height: 50vh;
transform-style: preserve-3d;
transform: rotateX(45deg) rotateZ(35deg) ;
position: relative ;
left: calc(50% - 25vw) ;
top: calc(50% - 25vh) ;
}
.link {
display: inline-block;
width: 100%;
height: 100%;
position: absolute;
}
.wrapper * {
width: 100%;
height: 100%;
position: absolute;
transition: all .4s ease-in-out;
}
.wrapper img {transition: all .4s ease-in-out;
}
.layer {z-index: -1;background-color: #5debb4;
}
.wrapper:hover img {transform: translateZ(10vmin);
}
.wrapper:hover .layer{transform: translateZ(6vmin);
}<!DOCTYPE html>
<html lang="en">
<head>
<style>
</style>
</head>
<body>
<div class="wrapper">
<a href="https://google.com" target="_blank" class="link">
<img src="https://images.unsplash.com/photo-1555919040-66d6d368cfc4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1225&q=80">
<div class="layer"></div>
</a>
</div>
</body>
</html>