IE和Edge中的翻转卡

Question

有没有办法在Internet Explorer中使用<div>修复翻转rotateY(180deg)的转换？在悬停时，<div>消失，然后在动画后出现。 Here是小提琴。

#card {
  height: 200px;
  position: relative;
  width: 200px;
}

#foreground, #background {
  backface-visibility: hidden;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 0.5s;
}

#foreground {
  background-color: blue;
  transform: translateZ(1px) rotateY(0deg);
}

#background {
  background-color: red;
  transform: rotateY(180deg);
}

#card:hover #foreground {
  transform: rotateY(180deg);
}

#card:hover #background {
  transform: translateZ(1px) rotateY(0deg);
}

<div id="card">
    <div id="foreground">
        Foreground
    </div>
    <div id="background">
        Background
    </div>
</div>

Answer 1

删除translateZ。尝试强制GPU的优势对于像这样的简单transform来说并不明显。