CSS3 卡翻转故障答案

【问题标题】：CSS3 Card Flip GlitchCSS3 卡翻转故障
【发布时间】：2019-03-11 13:36:06
【问题描述】：

我使用 CSS 创建了一个 HTML 翻转卡片。但是，当卡片翻转时，会出现闪烁（好像它几乎不会完全翻转）。此故障主要发生在光标直接移动到卡片中心时。

非常感谢任何帮助！

.card-box {
  width: 100px;
  height: 50px;
  position: relative;
}

.card {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: 1s ease;
}

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

.front {
  background: red;
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.back {
  background: blue;
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: rotateY(180deg);
}

<div class="card-box">
  <div class="card">
    <div class="front">
      Front
    </div>
    <div class="back">
      Back
    </div>
  </div>

这里是 jsfiddle 的链接：https://jsfiddle.net/rogybear/tfcu3qkr/3/

【问题讨论】：

将鼠标悬停在卡片盒上，然后定位卡片元素
就是这样！！谢谢！！

标签： html css animation transition

【解决方案1】：

添加

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

.card-box {
  width: 100px;
  height: 50px;
  position: relative;
}

.card {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: 1s ease;
}

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

.front {
  background: red;
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.back {
  background: blue;
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: rotateY(180deg);
}

<div class="card-box">
  <div class="card">
    <div class="front">
      Front
    </div>
    <div class="back">
      Back
    </div>
  </div>

【讨论】：