How to auto flip CSS cards till some duration and make them disappear from screen on a button click?

Question

I am trying to build a lucky draw system. There are 8 cards in each category and 8 people to assign those cards. I want to make a flipping animation on cards that all cards flip till 10 seconds then only one card appear on screen as jackpot. How can I achieve that with CSS and JavaScript?

My current code:-

CSS

.card {
display: grid;
  grid-template-columns: 300px;
float: none; /* Added */
  margin-top: 50px;
  border-radius: 18px;
  align-content: center;
margin-left: auto;
margin-right: auto;
  background-color: #FFEB3B;

  box-shadow: 5px 5px 15px rgba(0,0,0,0.9);
  font-family:Lucida Handwriting;
  text-align: center;


  transition: 0.5s ease;
  cursor: pointer;
}

In current system i am loading all cards to screen. How can i make them rotate for 10 seconds and make only one card visible and other disappear on a button click.

Answer 1

I set the required functions. You can call them depending on the usage you want

var elems = document.getElementsByClassName('flip-box-inner');
var totalSecond = 0;
var myTimer;
function RotationCard() {
    totalSecond = totalSecond + 1;
    for (var i = 0; i < elems.length; i++) {
     if(totalSecond == 1)
     {
         if(i%2 == 0)
         {
            if(!elems[i].classList.contains("myAnim"))
                elems[i].classList.add("myAnim");
             else
                elems[i].classList.remove("myAnim");
         }
     }
     else
     {
         if(!elems[i].classList.contains("myAnim"))
            elems[i].classList.add("myAnim");
          else
            elems[i].classList.remove("myAnim");
     }
   }
           
            
   if (totalSecond <= 10) {               
       myTimer = setTimeout(RotationCard, 1000);
   }
   else
   {
       ResetAndClearCard();
   }
}
        
        
function SelectCard()
{
    ResetAndClearCard();
    var rand = Math.floor(Math.random() * 10) + 1;
    for (var i = 0; i < elems.length; i++) {            
       if(rand == i)
           elems[i].classList.add("myAnim");
    }
}
        
function ResetAndClearCard()
{
    totalSecond = 0;
    clearTimeout(myTimer);
    for (var i = 0; i < elems.length; i++) {          
        if(elems[i].classList.contains("myAnim"))
            elems[i].classList.remove("myAnim");                  
    }
}

body {
  font-family: Arial, Helvetica, sans-serif;
  text-align:center;
}

.flip-box {
  background-color: transparent;
  width: 300px;
  height: 200px;
  perspective: 1000px;
  display:inline-block;
}

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

.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}

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

.flip-box-front {
  background-color: #bbb;
  color: black;
}

.flip-box-back {
  background-color: #555;
  color: white;
  transform: rotateY(180deg);
}

.myAnim
{
  transform: rotateY(180deg);
  transition: transform 0.8s;
}
.btn1
{
   height:30px;
   bordder:1px solid #ddd;
   width:150px;
   background:#228833;
   color:white;
}


.btn2
{
   height:30px;
   bordder:1px solid #ddd;
   width:150px;
   background:#2233ff;
   color:white;
}

.btn3
{
   height:30px;
   bordder:1px solid #ddd;
   width:180px;
   background:#ff2266;
   color:white;
}

.btn1:hover,.btn2:hover,.btn3:hover
{
   background:#223366;
}

<button class="btn1" onclick="RotationCard()">rotation</button>
<button class="btn2" onclick="SelectCard()">select</button>
<button class="btn3" onclick="ResetAndClearCard()">reset & clear Timer</button>
</div>

<h1>Image Flip with Text</h1>
<h3>Hover over the image below:</h3>


<div class="flip-box">
  <div class="flip-box-inner">
    <div class="flip-box-front">
      <img src="https://unsplash.it/1920/600?image=13" alt="Paris" style="width:300px;height:200px">
    </div>
    <div class="flip-box-back">
      <h2>Paris</h2>
      <p>What an amazing city</p>
    </div>
  </div>
</div>

<div class="flip-box">
  <div class="flip-box-inner">
    <div class="flip-box-front">
      <img src="https://unsplash.it/1920/600?image=13" alt="Paris" style="width:300px;height:200px">
    </div>
    <div class="flip-box-back">
      <h2>Paris</h2>
      <p>What an amazing city</p>
    </div>
  </div>
</div>


<div class="flip-box">
  <div class="flip-box-inner">
    <div class="flip-box-front">
      <img src="https://unsplash.it/1920/600?image=13" alt="Paris" style="width:300px;height:200px">
    </div>
    <div class="flip-box-back">
      <h2>Paris</h2>
      <p>What an amazing city</p>
    </div>
  </div>
</div>

<div class="flip-box">
  <div class="flip-box-inner">
    <div class="flip-box-front">
      <img src="https://unsplash.it/1920/600?image=13" alt="Paris" style="width:300px;height:200px">
    </div>
    <div class="flip-box-back">
      <h2>Paris</h2>
      <p>What an amazing city</p>
    </div>
  </div>
</div>


<div class="flip-box">
  <div class="flip-box-inner">
    <div class="flip-box-front">
      <img src="https://unsplash.it/1920/600?image=13" alt="Paris" style="width:300px;height:200px">
    </div>
    <div class="flip-box-back">
      <h2>Paris</h2>
      <p>What an amazing city</p>
    </div>
  </div>
</div>

<div class="flip-box">
  <div class="flip-box-inner">
    <div class="flip-box-front">
      <img src="https://unsplash.it/1920/600?image=13" alt="Paris" style="width:300px;height:200px">
    </div>
    <div class="flip-box-back">
      <h2>Paris</h2>
      <p>What an amazing city</p>
    </div>
  </div>
</div>


<div class="flip-box">
  <div class="flip-box-inner">
    <div class="flip-box-front">
      <img src="https://unsplash.it/1920/600?image=13" alt="Paris" style="width:300px;height:200px">
    </div>
    <div class="flip-box-back">
      <h2>Paris</h2>
      <p>What an amazing city</p>
    </div>
  </div>
</div>

<div class="flip-box">
  <div class="flip-box-inner">
    <div class="flip-box-front">
      <img src="https://unsplash.it/1920/600?image=13" alt="Paris" style="width:300px;height:200px">
    </div>
    <div class="flip-box-back">
      <h2>Paris</h2>
      <p>What an amazing city</p>
    </div>
  </div>
</div>