避免 CSS 旋转的元素出现闪烁（多次旋转）

Question

背景

我不是一名网络开发人员，而是一名数据科学家，他使用 R Markdown

 和 

library(flexdashboard)

 构建仪表板。也就是说，我依赖于给定的 

css

 框架，我想使用一些自制的 

CSS/HTML

 来扩展该框架。

目标

我想创建一个模仿

flexdashboard

 自己的 

.value-box

 的视觉效果，但添加悬停效果，使值框旋转并显示不同的值框。

我的尝试

我设法创建了一个旋转值框，即它进行旋转并且看起来与开箱即用的值框非常相似。但旋转不是很干净，即似乎同时发生了多次尝试开始旋转。

预期解决方案

我喜欢只要鼠标悬停在元素上方，翻转框就会干净地旋转。一旦它离开，就应该旋转回来。在所附的 gif 中，您可以看到一些尝试，其中只有一次干净的旋转。

不干净溶液的示例 GIF

我的研究

我在这里找到了答案：

CSS Rotating Info Cards are Flickering，我认为答案可以解决我的问题，但我不知道如何采用它。我需要如何更改 css 规则的标记才能获得干净的翻转效果？

代码

（我知道它不是 100% 最小化，但至少尝试模仿原始 valueBox 的一些外观和感觉）

/* Simplified Framework (rmarkdown flexdashboard) CSS */
.page {
  display: flex;
  flex-direction: column;
}

.wrapper {
  display: flex;
  flex-direction: column;
}

.row {
  display: flex;
  flex-direction: row;
}

.value-box {
    border-radius: 2px;
    position: relative;
    display: block;
    margin-right: 8px;
    margin-bottom: 8px;
    color: #fff;
}

.value-box > .inner {
    padding: 10px;
    padding-left: 20px;
    padding-right: 20px;
}

.value-box .value {
    font-size: 38px;
    font-weight: bold;
    margin: 0 0 3px 0;
    white-space: nowrap;
    padding: 0;
}

.value-box .caption {
    font-size: 15px;
}

.fa {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    display: inline-block;
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 80px;
    color: rgba(0, 0, 0, 0.15);      
}

/* Custom Flipbox */

.value-box-parent {
  position: relative;
  transform-style: preserve-3d;
}

.value-box.front, .value-box.back {
  transition: transform 0.5s ease;
  position: absolute;
  width: 100%;
  -webkit-backface-visibility: hidden;
}

.back {
  transform: perspective(1000px) rotateY(180deg);
}

.value-box-parent:hover .back {
  transform: perspective(1000px) rotateY(0deg);
}

.front {
  transform: perspective(1000px) rotateY(0deg);
}

.value-box-parent:hover .front {
  transform: perspective(1000px) rotateY(-180deg);
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet"/>
<div class="page" style="height: 100%;">
  <div class="wrapper" style="height: 100%;">
    <div class="row" style="flex: 150 150 0px;">
      <!-- Out of the Box Value Box -->
      <div class="value-box" style="background-color: rgb(31, 158, 137); flex: 576 576 0px;">
        <div class="inner">
          <p class="value">123</p>
          <p class="caption">Number</p>
        </div>
        <div class="icon"><i class="fa fa-hashtag"></i></div>
      </div>
      <!-- My Attempt of a FlipBox -->
      <div class="value-box" style="flex: 576 576 0px;">
        <!-- The following markup can be freely changed -->
        <div class="value-box-parent">
          <div class="value-box front" style="background-color: rgb(38, 130, 142);">
            <div class="inner">
              <p class="value">1</p>
              <p class="caption">FlipBox</p>
            </div>
            <div class="icon"><i class="fa fa-cog"></i></div>
          </div>
          <div class="value-box back" style="background-color: rgb(31, 158, 137);">
            <div class="inner">
              <p class="value">2</p>
              <p class="caption">FlipBox</p>
            </div>
            <div class="icon"><i class="fa fa-cog"></i></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

导致闪烁的原因：

1. .front

    和 

   .back

    有 

   position: absolute;
这会导致它们被从流程中取出，并使它们的父级 (
2. .value-box-parent

   ) 塌陷到 0 高度

即使
3. .value-box-parent

    的高度为 0，它仍然可以接收从其子级（

   .front

    和 

   .back

   ）传递的指针事件

但是在翻转过程中，如果指针还在移动，则可能会掉出它们的区域。
这会导致
5. .value-box-parent

    在 

   :hover

    和正常状态之间翻转。

如何修复：

给
• .value-box-parent

  一个高度，或者将其样式更改为

  position: absolute; inset:0;

  ，或者任何其他方法来防止其高度塌陷为0

或者在 CSS 末尾附近，将 2 个
• value-box-parent:hover

   更改为 

  .value-box:hover

/* Simplified Framework (rmarkdown flexdashboard) CSS */

.page {
  display: flex;
  flex-direction: column;
}

.wrapper {
  display: flex;
  flex-direction: column;
}

.row {
  display: flex;
  flex-direction: row;
}

.value-box {
  border-radius: 2px;
  position: relative;
  display: block;
  margin-right: 8px;
  margin-bottom: 8px;
  color: #fff;
}

.value-box>.inner {
  padding: 10px;
  padding-left: 20px;
  padding-right: 20px;
}

.value-box .value {
  font-size: 38px;
  font-weight: bold;
  margin: 0 0 3px 0;
  white-space: nowrap;
  padding: 0;
}

.value-box .caption {
  font-size: 15px;
}

.fa {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  display: inline-block;
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 80px;
  color: rgba(0, 0, 0, 0.15);
}


/* Custom Flipbox */

.value-box-parent {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.value-box.front,
.value-box.back {
  transition: transform 0.5s ease;
  position: absolute;
  width: 100%;
  -webkit-backface-visibility: hidden;
}

.back {
  transform: perspective(1000px) rotateY(180deg);
}

.value-box-parent:hover .back {
  transform: perspective(1000px) rotateY(0deg);
}

.front {
  transform: perspective(1000px) rotateY(0deg);
}

.value-box-parent:hover .front {
  transform: perspective(1000px) rotateY(-180deg);
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet" />
<div class="page" style="height: 100%;">
  <div class="wrapper" style="height: 100%;">
    <div class="row" style="flex: 150 150 0px;">
      <!-- Out of the Box Value Box -->
      <div class="value-box" style="background-color: rgb(31, 158, 137); flex: 576 576 0px;">
        <div class="inner">
          <p class="value">123</p>
          <p class="caption">Number</p>
        </div>
        <div class="icon"><i class="fa fa-hashtag"></i></div>
      </div>
      <!-- My Attempt of a FlipBox -->
      <div class="value-box" style="flex: 576 576 0px;">
        <!-- The following markup can be freely changed -->
        <div class="value-box-parent">
          <div class="value-box front" style="background-color: rgb(38, 130, 142);">
            <div class="inner">
              <p class="value">1</p>
              <p class="caption">FlipBox</p>
            </div>
            <div class="icon"><i class="fa fa-cog"></i></div>
          </div>
          <div class="value-box back" style="background-color: rgb(31, 158, 137);">
            <div class="inner">
              <p class="value">2</p>
              <p class="caption">FlipBox</p>
            </div>
            <div class="icon"><i class="fa fa-cog"></i></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>