Flip card every time the content is changes

Question

I want to flip the card every time the content of my box changes i.e after every second or minute or hour or day passes.

I have tried applying transform and rotate properties directly to boxes but it is not working as it causes my text within the box to rotate 180 degrees rather than flipping the card.

.container {
  background-color: #211D2E;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#midsec {
  display: grid;
  position: absolute;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr 3fr 1fr;
  top: 104px;
  width: 131vh;
  height: 52%;
  margin-left: auto;
  margin-right: auto;
  gap: 20px;
}

.container p {
  color: #FFFEFF;
  font-family: hat;
  font-weight: 700;
  font-size: xx-large;
  letter-spacing: 2px;
  position: relative;
  display: grid;
  grid-column-start: 2;
  grid-column-end: 4;
  align-items: center;
  justify-content: center;
}

.container span {
  font-family: hat;
  color: hsl(237, 18%, 59%);
}

#stars {
  margin-left: 5%;
  max-width: 73%;
}

#hills {
  max-width: 100%;
  height: 34vh;
  margin-top: 5%;
}

.top-box {
  width: 100%;
  display: grid;
  background-color: #34364F;
  border-radius: 11px;
  align-items: center;
  justify-content: center;
  font-size: 21vh;
  color: #FA5D86 !important;
  letter-spacing: 3px;
}

.name {
  display: grid;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 11px;
}

<div class="container">
  <img src="images/bg-stars.svg" alt="none" id="stars">
  <div id="midsec">
    <p>We're launching soon</p>
    <span class="name" style="grid-row: 3; grid-column: 1;">Days</span>
    <span class="name" style=" grid-row: 3; grid-column: 2;">Hours</span>
    <span class="name" style=" grid-row: 3; grid-column: 3;">Minutes</span>
    <span class="name" style=" grid-row: 3; grid-column: 4;">Seconds</span>
    <span class="top-box" id="days" style="grid-column: 1;"> </span>
    <span class="top-box" id="hours" style="grid-column: 2;"></span>
    <span class="top-box" id="mins" style="grid-column: 3;"></span>
    <span class="top-box" id="seconds" style="grid-column: 4;"></span>
  </div>
  <img src="images/pattern-hills.svg" alt="none" id="hills">
</div>

Answer 1

1. Add transition property in .top-box: transition: transform 0.6s;
2. Add following CSS for the .flip which will be added dynamically with JS:

.flip {
  transform: rotateX(90deg);
}

3. Add following script to display timer and flip functionality:

<script>
  function updateTimer() {
    const endDate = new Date('2024-08-10T00:00:00Z');
    const now = new Date();
    const timeDiff = endDate - now;

    if (timeDiff <= 0) {
      document.getElementById('days').textContent = '00';
      document.getElementById('hours').textContent = '00';
      document.getElementById('mins').textContent = '00';
      document.getElementById('seconds').textContent = '00';
      return;
    }

    const days = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
    const hours = Math.floor(
      (timeDiff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
    );
    const minutes = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((timeDiff % (1000 * 60)) / 1000);

    const daysElement = document.getElementById('days');
    const hoursElement = document.getElementById('hours');
    const minsElement = document.getElementById('mins');
    const secondsElement = document.getElementById('seconds');

    if (daysElement.textContent !== days.toString().padStart(2, '0')) {
      daysElement.classList.add('flip');
    }
    if (hoursElement.textContent !== hours.toString().padStart(2, '0')) {
      hoursElement.classList.add('flip');
    }
    if (minsElement.textContent !== minutes.toString().padStart(2, '0')) {
      minsElement.classList.add('flip');
    }
    if (
      secondsElement.textContent !== seconds.toString().padStart(2, '0')
    ) {
      secondsElement.classList.add('flip');
    }

    setTimeout(() => {
      daysElement.classList.remove('flip');
      hoursElement.classList.remove('flip');
      minsElement.classList.remove('flip');
      secondsElement.classList.remove('flip');
    }, 600);

    daysElement.textContent = days.toString().padStart(2, '0');
    hoursElement.textContent = hours.toString().padStart(2, '0');
    minsElement.textContent = minutes.toString().padStart(2, '0');
    secondsElement.textContent = seconds.toString().padStart(2, '0');
  }

  setInterval(updateTimer, 1000);
  updateTimer();
</script>

NOTE: Adjust my code according to your desired output. Happy coding!