html - 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

添加了

.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>