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
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>