首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >HTML CSS中的卡片翻转动画在IE中不起作用

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

Stack Overflow用户
提问于 2018-06-15 22:02:58
回答 1查看 390关注 0票数 0

这个卡片夹超文本标记语言组件只使用超文本标记语言和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;
}
EN

回答 1

Stack Overflow用户

发布于 2018-06-16 03:05:15

IE中的问题是由转换引起的。如果你不需要使用两个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;
}
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50877185

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档