3D эффект наведения не работает в Firefox - PullRequest
Новая
       5

3D эффект наведения не работает в Firefox

3 голосов
/ 24 апреля 2019

Я хочу создать эффект 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>

1 Ответ

4 голосов
/ 24 апреля 2019

добавить 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>
...