I am basically trying to replicate an effect from a website (Awwwards link) where there seems to be a grid of divs that individually "flip" vertically on-hover and all together on-scroll.

There also seems to have a subtle effect once the card flips back similar to how a Framer Spring looks like.

On inspection, the website uses threejs, lenis, and swup, but I'm not sure whether it actually uses threejs for that particular section.

This is as far as I have tried to do it in just CSS, which I could put multiple of in a grid:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  font-family: Arial, sans-serif;
}

.flip-card {
  width: 200px;
  height: 120px;
  perspective: 1000px;
  cursor: pointer;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateX(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  backface-visibility: hidden;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.flip-card-front {
  background-color: dodgerblue;
  color: white;
}

.flip-card-back {
  background-color: #2980b9;
  color: white;
  transform: rotateX(180deg);
}

<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <p>Front</p>
    </div>
    <div class="flip-card-back">
      <p>Back</p>
    </div>
  </div>
</div>