CSS卡片翻转内容延迟

Question

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

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

我已将问题缩小为 position: absolute 属性引起的问题，因为当我删除该行时，没有延迟，但我希望 link无论说明文本多长或多长，都应位于卡片底部。关于如何避免这种延迟的任何想法？第一次翻转后没有延迟，虽然不会破坏整个站点，但并不理想。

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>

CSS卡片翻转内容延迟

CSS card flip back content is delayed

html

css

css-position

absolute