Tengo el efecto Flip de seguir el código html cuando se desplaza el mouse
<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>Con 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); }Quiero un código para la función de volteo cuando el usuario se desplaza en un dispositivo móvil. Esta función solo debería aplicarse a dispositivos móviles. Lo que debería mejorar mi experiencia de usuario.
Simplemente agregue @media-query para un ancho de pantalla inferior a 750 px para aplicarlo solo en dispositivos móviles.
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>