为什么在此 CSS 转换期间有明显的滞后？

Question

这个 html 元素的转换在第一次运行时 有明显的滞后 。将鼠标悬停在上面不止一次后，此卡片翻转机制很顺畅。有人可以解释为什么以及如何解决它吗？

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.k-card {
  border-radius: 25px;
  width: 250px;
  margin: 2%;
  border-color: white;
  height: 330px;
}

.k-card-image {
  text-align: center;
  align-content: center;
}

.k-card-footer {
  text-align: center;
  border: none;
  position: absolute;
  bottom: 1px;
  width: 100%;
  background-color: inherit;
  font-weight: bold;
  color: white;
  align-items: center;
  border-radius: 25px;
}


/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */

.flip-card {
  border-radius: 25px;
  width: 250px;
  height: 330px;
}


/* This container is needed to position the front and back side */

.flip-card-inner {
  border-radius: 25px;
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.5s;
  transform-style: preserve-3d;
}


/* Do an horizontal flip when you move the mouse over the flip box container */

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


/* Position the front and back side */

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  /* Safari */
  backface-visibility: hidden;
  border-radius: 25px;
}


/* Style the front side */

.flip-card-front {
  background-color: #18988B;
}

.k-button.k-primary {
  background-color: #18988B;
  padding: 2px;
  border-color: #18988B;
}


/* Style the back side */

.flip-card-back {
  background-color: #58595B;
  transform: rotateY(180deg);
}

<div class="flip-card k-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <br />
      <center>
        <img class="k-card-image" src="https://i.picsum.photos/id/1003/400/400.jpg" width="70%" />
      </center>
      <div class="k-card-footer">
        <p>REPORTS</p>
      </div>
    </div>
    <div class="flip-card-back">
      <br />
      <center>
        <img class="k-card-image" src="https://i.picsum.photos/id/1001/400/400.jpg" width="70%" />
      </center>
      <div class="k-card-footer">
        <p>TEST</p>
      </div>
    </div>
  </div>
</div>
</div>

此外，一个 link 到 jsfiddle：https://jsfiddle.net/McRobBlob/s9f07wgy/

谢谢！

Answer 1

问题出在属性 transform-style: preserve-3d; 上。

将其从 .flip-card-inner 块中删除并移至 .flip-card:hover .flip-card-inner 块。

.flip-card-inner {
  border-radius: 25px;
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.5s;
/*  transform-style: preserve-3d; remove */
}


/* Do an horizontal flip when you move the mouse over the flip box container */

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
  transform-style: preserve-3d; /* add */
}

更新

@TemaniAfif 评论后我有更好的解决方案：

只需从您的 css 中删除 backface-visibility: hidden;。

.flip-card-front,
.flip-card-back {
/* -webkit-backface-visibility: hidden; remove */
/* backface-visibility: hidden;  remove */
}

Answer 2

我会尝试将 will-change: transform; 或 will-change: auto; 添加到 .flip-card-inner。

参考： https://developer.mozilla.org/en-US/docs/Web/CSS/will-change

为什么在此 CSS 转换期间有明显的滞后？

Why is there a visible lag during this CSS transition?

html

css

css-transitions

css-transforms