Html Question posted in
Some basic documentation can be found here.

Html – 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>
Tags:

2

Answers


  1. 0
    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);
}
    1. 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!

    Login or Signup to reply.
  2. 0

    In order to create a flipping card effect which will update every second, minute, hour or day, you should use CSS Animations and JavaScript in order to update the content of box items.

    I am listing down a method which you can use to implement this:

    <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>
    <div class="top-box" id="days" style="grid-column: 1;">
      <div class="flip-box-inner">
        <div class="flip-box-front"> </div>
        <div class="flip-box-back"> </div>
      </div>
    </div>
    <div class="top-box" id="hours" style="grid-column: 2;">
      <div class="flip-box-inner">
        <div class="flip-box-front"> </div>
        <div class="flip-box-back"> </div>
      </div>
    </div>
    <div class="top-box" id="mins" style="grid-column: 3;">
      <div class="flip-box-inner">
        <div class="flip-box-front"> </div>
        <div class="flip-box-back"> </div>
      </div>
    </div>
    <div class="top-box" id="seconds" style="grid-column: 4;">
      <div class="flip-box-inner">
        <div class="flip-box-front"> </div>
        <div class="flip-box-back"> </div>
      </div>
    </div>
  </div>
  <img src="images/pattern-hills.svg" alt="none" id="hills">
</div>

    Now the CSS code is written below:

    .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;
  perspective: 1000px;
  position: relative;
}

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

.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.flip-box-back {
  transform: rotateY(180deg);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #34364F;
}

.flip {
  animation: flip 1s forwards;
}

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

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

    JavaScript

    function updateFlipBox(box, newValue) {
  const front = box.querySelector('.flip-box-front');
  const back = box.querySelector('.flip-box-back');

  // Swap the text content
  front.textContent = back.textContent;
  back.textContent = newValue;

  // Trigger the flip animation
  const flipInner = box.querySelector('.flip-box-inner');
  flipInner.classList.remove('flip');
  void flipInner.offsetWidth; // Trigger reflow
  flipInner.classList.add('flip');
}

function updateTime() {
  const now = new Date();
  const days = now.getDate();
  const hours = now.getHours();
  const minutes = now.getMinutes();
  const seconds = now.getSeconds();

  updateFlipBox(document.getElementById('days'), days);
  updateFlipBox(document.getElementById('hours'), hours);
  updateFlipBox(document.getElementById('mins'), minutes);
  updateFlipBox(document.getElementById('seconds'), seconds);
}

setInterval(updateTime, 1000);
updateTime(); // Initial call to set values immediately

    Note: You should do the basic manipulation from your side as per your requirements.

    I hope you will find my response will resolve your query.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search