使用 backface-visibility 属性时，CSS 中的卡片项目未按预期翻转

Question

这是 HTML 代码：

section {
  display: flex;
  margin: 0;
  padding: 0;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.card-item__side {
  border: 1px solid black;
  width: 350px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card-item {
  position: relative;
  transform-style: preserve-3d;
}

.front {}

.back {
  position: absolute;
  top: 0;
  left: 0;
  transform: rotateY(-180deg);
}

.card-item__side {
  backface-visibility: hidden;
}

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

<section>

  <div class="card-item">

    <div class="card-item__side front">

      <div class="card-info">
        <h2>Here is the information</h2>
        <p>Flip the card</p>
      </div>

    </div>

    <div class="card-item__side back">

      <div class="card-info">
        <p>The card is flipped</p>
      </div>
    </div>

  </div>

</section>

因此，当我尝试将鼠标悬停在卡片正面时，它会显示背面内容，包括镜像的正面内容（而不是像我使用背面可见性属性时预期的那样正面消失）。问题是什么以及如何解决解决它吗？

也许问题出在 HTML 标记上，元素的布局方式错误？

Answer 1

添加

.card-item__side { will-change: transform; }

以便浏览器优化您的转换。

section {
  display: flex;
  margin: 0;
  padding: 0;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.card-item__side {
  border: 1px solid black;
  width: 350px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  will-change: transform;
}

.card-item {
  position: relative;
  transform-style: preserve-3d;
}

.front {}

.back {
  position: absolute;
  top: 0;
  left: 0;
  transform: rotateY(-180deg);
}

.card-item__side {
  backface-visibility: hidden;
}

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

<section>

  <div class="card-item">

    <div class="card-item__side front">

      <div class="card-info">
        <h2>Here is the information</h2>
        <p>Flip the card</p>
      </div>

    </div>

    <div class="card-item__side back">

      <div class="card-info">
        <p>The card is flipped</p>
      </div>
    </div>

  </div>

</section>