I have Flip effect of following html code when mouse hover

<div class="flip-card">
      <div class="flip-card-inner">
         <div class="flip-card-front">
             <i className="fa fa-birthday-cake my-4" style={{ fontSize : 150 "px"}}></i>
         </div>
         <div class="flip-card-back">
             <h1 class="mt-4">2nd</h1><h2>June</h2><h3>1998</h3><br/>
         </div>
       </div>
</div>

With CSS

.flip-card {
    background-color: transparent;
    margin: 5px 5px 5px 5px;
    width: 200px;
    height: 200px;
    perspective: 1000px;
    border-radius: 5px;
  }
  
  .flip-card-inner {
    border-radius: 5px;
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  }
  
  .flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
  }
  
  .flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  
  .flip-card-front {
    border-radius: 5px;
    background-color:white;
    color: black;
  }
  
  .flip-card-back {
    border-radius: 5px;
    background-color: #2980b9;
    color: white;
    transform: rotateY(180deg);
  }

I want a code for the flip function when the user scroll on a mobile device. This feature should only applicable for mobile devices. Which should improve my user experience

CodePudding user response：

Just add @media-query for screen width less than 750px to apply it on mobile devices only.

window.onscroll = function() {myFunction()};

card = document.querySelector('.flip-card-inner');

function myFunction() {
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
    card.style.transform = 'rotateY(180deg)';
  } else {
    card.style.transform = 'rotateY(0deg)';
  }
}

body{
  height:1000px;
  position:relative;
}
.flip-card {
    background-color: transparent;
    margin: 5px 5px 5px 5px;
    width: 200px;
    height: 200px;
    perspective: 1000px;
    border-radius: 5px;
    position:fixed;
    top:50px;
    left:200px;
  }
  
  .flip-card-inner {
    border-radius: 5px;
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  }
  
  .flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
  }
  
  .flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  
  .flip-card-front {
    border-radius: 5px;
    background-color:white;
    color: black;
  }
  
  .flip-card-back {
    border-radius: 5px;
    background-color: #2980b9;
    color: white;
    transform: rotateY(180deg);
  }

<div class="flip-card">
      <div class="flip-card-inner">
         <div class="flip-card-front">
             <i className="fa fa-birthday-cake my-4" style={{ fontSize : 150 "px"}}></i>
         </div>
         <div class="flip-card-back">
             <h1 class="mt-4">2nd</h1><h2>June</h2><h3>1998</h3><br/>
         </div>
       </div>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>