html - HTML CSS 中的卡片翻转动画在 IE 中不起作用

Question

此卡片剪辑 HTML 组件仅使用 HTML 和 CSS，它适用于 IE11 除外。在 IE11 上，它又慢又滞后。当我删除 backface-visibility:hidden 时，它在 IE11 上完美运行，但我显然需要该行。

有哪些潜在的修复方法

https://codepen.io/anon/pen/pKWPVb

<div class="card">
  <div class="card__side card__side--front">

  </div>

  <div class="card__side card__side--back ">

  </div>
</div>

CSS

 .card {
  width: 200px;
  perspective: 150rem;
  -moz-perspective: 150rem;
  position: relative;
  height: 52rem;

}
.card__side {
  border-radius: 3px;
  overflow: hidden;
  background: #808080;
  height: 50rem;
  width: 100%;
  transition: all 800ms ease;
  position: absolute;
  top: 0;
  left: 0;
  backface-visibility: hidden;
}
.card__side--front {
  background: red;
  z-index: 1;

}
.card__side--back {
  transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
}
.card:hover .card__side--front {
  transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
}
.card:hover .card__side--back {
  transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
}

html {
  font-size: 5px;
}

Answer 1

IE 中的问题是由转换引起的。 如果您不需要使用 2 个 div 元素，我建议您这样:

   <div class="card">

  <div class="card__side card__side--back ">

  </div>
</div>



   .card {
  width: 200px;
  perspective: 150rem;
  -moz-perspective: 150rem;
  position: relative;
  height: 52rem;

}
.card__side {
  border-radius: 3px;
  overflow: hidden;
  background: #808080;
  height: 50rem;
  width: 100%;
  transition: all 800ms ease;
  position: absolute;
  top: 0;
  left: 0;
  //backface-visibility: hidden;
}

.card__side--back {

  transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
}

.card:hover .card__side--back {
  transform:  rotateY(0deg);
   background: red;
  -ms-transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg);
}

html {
  font-size: 5px;
}