CSS откат карты задерживается

Question

Я работаю на веб-сайте, на котором я использую анимацию переворачивания карты с содержимым спереди и сзади. Анимация выполняется через CSS и активируется при наведении курсора, что работает нормально.

Моя проблема заключается в том, что я включаю тег <a>, который абсолютно расположен на спине. Первый щелчок любой карты приводит к задержке перед отображением содержимого обратной стороны. Это можно увидеть в этом jsfiddle .

Я сузил проблему до того, что она вызвана свойством position: absolute, так как при удалении этой строки задержки не возникает, однако Я хочу, чтобы ссылка была внизу карты, независимо от того, насколько длинным или большим является текст описания. Любая идея о том, как я могу избежать этой задержки? После первого пролистывания задержки не происходит, и, хотя она не разрушит весь сайт, она не идеальна.

Answer 1

Если проблема связана только с абсолютным положением, то удалите ее и используйте для ее достижения flex.

Если вы хотите изучить flex, тогда flexbox froggy - увлекательный способ изучить его.

Я также внес изменения в вашу скрипку .

.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>