Ahmad Reza
Ahmad Reza

Reputation: 913

3d hover effect not works in firefox

I want to design a 3d hover effect and my code works fine in opera,chrome but not work in firefox. I even try using vendor prefixes but nothing happens. Odd part is when I remove anchor tag from my html then code works in all browsers but I need that anchor tag and with anchor tag effect not works 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>

Upvotes: 3

Views: 198

Answers (1)

Temani Afif
Temani Afif

Reputation: 273483

add transform-style: preserve-3d; ref to the link too:

.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>

Upvotes: 4

Related Questions