我想设计一个3D悬停效果，我的代码在opera，chrome中工作得很好但在firefox中不起作用。我甚至尝试使用供应商前缀但没有任何反应。奇怪的部分是当我从我的html中删除锚标签然后代码在所有浏览器中工作，但我需要锚标记和锚标记效果不适用于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>将transform-style: preserve-3d; ref添加到链接中：
.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;
transform-style: preserve-3d;
}
.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);
}<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>