Flip card

<div class="flip-card">
  <div class="flip-card__inner">
    <div class="flip-card__face flip-card__face_front">CSS</div>
    <div class="flip-card__face flip-card__face_back">Motion</div>
  </div>
</div>

<style>
.flip-card {
  perspective: 800px;
  width: 180px;
  height: 120px;
}

.flip-card__inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  animation: flipCard 2.4s ease-in-out infinite;
}

.flip-card__face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(59, 130, 246, 0.16), rgba(139, 92, 246, 0.16));
  border: 1px solid rgba(255, 255, 255, 0.2);
  backface-visibility: hidden;
  font-weight: 700;
  color: #e2e8f0;
}

.flip-card__face_back {
  transform: rotateY(180deg);
  background: linear-gradient(145deg, rgba(139, 92, 246, 0.18), rgba(59, 130, 246, 0.14));
}

@keyframes flipCard {
  0%, 100% {
    transform: rotateY(0);
  }
  50% {
    transform: rotateY(180deg);
  }
}
</style>