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

by

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.

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

  1. var elems = document.getElementsByClassName('flip-box-inner');
        var totalSecond = 0;
        var bool =true;
        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 <= 11) {
                
                myVar = setTimeout(RotationCard, 1000);
            }
            else
            {
                 ResetCard();
                 totalSecond = 0;
            }
        }
        
        
        function SelectCard()
        {
           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 ResetCard()
         {
            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:150px;
   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="ResetCard()">reset</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="img_paris.jpg" 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="img_paris.jpg" 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="img_paris.jpg" 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="img_paris.jpg" 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="img_paris.jpg" 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="img_paris.jpg" 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="img_paris.jpg" 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="img_paris.jpg" 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>
    Reply

Leave a Comment