Question

我正在尝试使用图像和文本创建简单的翻转动画，将鼠标悬停在图像上时将翻转并显示以前隐藏的文本。我现在拥有的东西就是我想要的，问题是，由于某种原因，它只能在Firefox中使用。

代码是纯html + CSS，我提供了一个jsfiddle并复制了该问题。在Firefox上尝试，然后在Edge或chrome上尝试，以查看我的问题。

    .Features-logo {
      height: 40vmin;
      pointer-events: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -o-user-select: none;
      user-select: none;
    }
    
    .flip-card {
      width: 40vmin;
      height: 40vmin;
    }
    
    .flip-card-inner {
      position: relative;
      width: 100%;
      height: 100%;
      text-align: center;
      transition: transform 0.6s;
    
    }
    
    .flip-card:hover .flip-card-inner {
      transform: rotateY(180deg);
    }
    
    .flip-card-front,
    .flip-card-back {
      position: absolute;
      width: 100%;
      height: 100%;
    }
    
    .flip-card-front {
      background-color: white;
      color: black;
    }
    
    .flip-card-back {
      background-color: white;
      color: red;
      transform: rotateY(180deg);
      backface-visibility: hidden;
      top: 40%;
    }

<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <img src='http://pngriver.com/wp-content/uploads/2018/04/Download-Dog-PNG-Image.png' class="Features-logo" alt="logo" />
    </div>
    <div class="flip-card-back">
      <h1>BORK</h1>
    </div>
  </div>
</div>

希望该动画能在所有现代浏览器中正常播放，但我有点迷茫！

提前谢谢！

Answer 1

您需要在父元素上考虑transform-style: preserve-3d;，并在前元素（不仅是后元素）上考虑backface-visibility: hidden;。另外，最好将top:0用作back元素，并考虑其他方法将文本放置在其中。这样做可以确保后部元件完全覆盖前部元件。

^{并非某些浏览器需要所有属性，但这可以确保在所有浏览器中都可以使用相同的属性}

.Features-logo {
  height: 40vmin;
  pointer-events: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.flip-card {
  width: 40vmin;
  height: 40vmin;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style:preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  top:0;
  width: 100%;
  height: 100%;
}

.flip-card-front {
  background-color: white;
  color: black;
  backface-visibility: hidden;
}

.flip-card-back {
  background-color: white;
  color: black;
  transform: rotateY(180deg);
  backface-visibility: hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <img src='http://pngriver.com/wp-content/uploads/2018/04/Download-Dog-PNG-Image.png' class="Features-logo" alt="logo" />
    </div>
    <div class="flip-card-back">
      <h1>BORK</h1>
    </div>
  </div>
</div>

如果要保留图像，请从图像中删除backface-visibility，并从文本中删除背景：

.Features-logo {
  height: 40vmin;
  pointer-events: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.flip-card {
  width: 40vmin;
  height: 40vmin;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style:preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  top:0;
  width: 100%;
  height: 100%;
}

.flip-card-front {
  background-color: white;
  color: black;
}

.flip-card-back {
  color: black;
  transform: rotateY(180deg);
  backface-visibility: hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <img src='http://pngriver.com/wp-content/uploads/2018/04/Download-Dog-PNG-Image.png' class="Features-logo" alt="logo" />
    </div>
    <div class="flip-card-back">
      <h1>BORK</h1>
    </div>
  </div>
</div>

带有文本的翻转动画仅在Firefox上有效，以任何方式使其可跨浏览器运行吗？

1 个答案: