Flip card every time the content is changes

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>