如何防止卡片翻转

Question

我有4张卡片，它们平放并在悬停时“站起来”，但它们也会翻转，因为它们有正面和背面。我只想要单面的牌，我不知道如何让它们停止翻转。我已经删除了卡片背面的html，但是我似乎无法阻止卡片在CSS中翻转。我需要在我的代码中做些什么来阻止它们翻转？

​

.card-holder {
  width: 90%;
  height: 70%;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: -370em;
  text-align: center;
}
  
div:target .card-face {
    animation: flip-2 1s;
    animation-fill-mode: forwards;
}
div:target .card-face:before {
      animation: shadow-2 1s;
      animation-fill-mode: forwards;
}
.card {
  display: inline-block;
  perspective: 1000px;
  position: relative;
  margin: 50px;
}
  .card:hover .card-face {
    animation: flip-2 1s;
    animation-fill-mode: forwards;
}
    .card:before{
      animation: shadow-2 1s;
      animation-fill-mode: forwards;
}  
.card-face {
  display: block;
  width: 139px;
  height: 250px;
  transform-origin: bottom;
  animation: flip 1s;
  animation-direction: reverse;
  animation-fill-mode: forwards;
}
  .front-card,  .project-img {
    width: inherit;
    height: inherit; 
  } 
  .card:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    transition: all 0.5s;
    transform-origin: bottom;
    animation: shadow 1s;
    animation-direction: normal;
    animation-fill-mode: forwards;
  }

.card-face {
  transition: 0.6s;
  transform-style: preserve-3d;
  position: relative;
}
.front-card {
  /* backface-visibility: hidden; */
  position: absolute;
  top: 0;
  left: 0;
}
/* .back-card {
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
} */
.front-card {
  transform: rotateY(180deg);
}
@keyframes flip {
  0% {
    transform: rotateX(50deg) rotateY(0deg);
  }
  60% {
    transform: rotateX(0deg);
  }
  100% {
    transform: rotateX(0deg) rotateY(180deg);
} 
}
@keyframes shadow {
  0% {
    box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
    transform: rotateX(0deg) translateZ(-60px) scale(0.85);
    opacity: 1;
  }
  60% {
    transform: rotateX(95deg) translateZ(-40px) scaleY(0.15) scaleX(0.65) rotateY(0);
    box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
    opacity: 0.25;
  }
  100% {
    transform: rotateX(95deg) translateZ(-40px) scaleY(0.05) scaleX(0.65) rotateY(0);
    box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
    opacity: 0.25;
}
}
/* @keyframes flip-2 {
  0% {
    transform: rotateX(50deg) rotateY(0deg);}
  60% {
    transform: rotateX(0deg); }
  100% {
    transform: rotateX(0deg) rotateY(180deg);}
} */
@keyframes shadow-2 {
  0% {
    box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
    transform: rotateX(0deg) translateZ(-60px) scale(0.85);
    opacity: 1;}
  60% {
    transform: rotateX(95deg) translateZ(-40px) scaleY(0.15) scaleX(0.65) rotateY(0);
    box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
    opacity: 0.25;}
  100% {
    transform: rotateX(95deg) translateZ(-40px) scaleY(0.05) scaleX(0.65) rotateY(0);
    box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
      opacity: 0.25;}
}

 <div class="card-holder" id="all-cards">
        <div class="card" id="card-1">
          <a href="#card-1" class="card-face">
            <div class="front-card">
              <img class="project-img" src="https://i.imgur.com/0RUrrQF.jpg" alt="Death">
            </div>
          </a>
        </div>
        <div class="card" id="card-2">
          <a href="#card-2" class="card-face">
            <div class="front-card">
              <img class="project-img" src="https://i.imgur.com/ulOYmlT.jpg" alt="Death">
            </div>
          </a>
        </div>
</div>

​

Answer 1

从...中删除此行100% { transform: rotateX(0deg) rotateY(180deg); }

@keyframes flip {
  0% {
    transform: rotateX(50deg) rotateY(0deg);
  }
  60% {
    transform: rotateX(0deg);
  }
  100% {
    transform: rotateX(0deg) rotateY(180deg);
} 
}