CSS3卡翻转毛刺

Question

我使用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/

Answer 1

已添加

null

.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);
}