CSS卡翻转内容延迟

Question

我正在一个网站上使用卡片翻转动画，内容在正面和背面。动画是通过 CSS 完成的，当鼠标悬停时会被激活，效果很好。

我的问题是我包含一个绝对位于背面的<a> 标签。任何卡片的第一次翻转都会导致在显示背面内容之前出现延迟。这个可以看at this jsfiddle。

我已将问题缩小到由 position: absolute 属性引起的问题，因为当我删除该行时，没有延迟，但是我希望链接位于卡片底部，无论多长时间或说明文字很大。关于如何避免这种延迟的任何想法？第一次翻转后没有延迟，即使不会毁掉整个网站，也不是很理想。

Answer 1

如果只有绝对位置是问题，那么删除它并使用 flex 来实现它。

如果您想学习 flex，那么flexbox froggy 是学习它的有趣方式。

我也对您的fiddle 进行了相同的更改。

.projectCardWrapper {
    width: 300px;
    height: 150px;
    margin-top: 0;
    margin-bottom: 0;
    text-align: center;
}

.projectCard {
    background-color: orange;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: all 1s ease;
    border-radius: 10%;
}

.projectCard:hover {
    transform: rotateY(180deg);
}

.front {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
}

.projectName {
    font-size: 40px;
}

.back {
    position: absolute;
    width: 100%;
    height: 100%;
    transform: rotateY(180deg);
    backface-visibility: hidden;
display: flex;
    flex-direction: column;
    align-items: center;
}

.projectLink {
    color: white;
    text-decoration: none;
    border: 2px solid white;
    padding: 3px;
    font-size: larger;
    margin-top: auto;
    margin-bottom: 5%;
}

<div class="projectCardWrapper cardWrapper">
  <div class="projectCard card">
    <div class="front">
      <p class="projectName">abc</p>
    </div>
    <div class="back">
      <p class="projectDescription">Description</p>
      <a href="test.html" class="projectLink">More</a>
    </div>
  </div>
</div>