Aquí hay una tarjeta invertida que funciona con lamer, pero me gustaría usar un temporizador en lugar de un evento de clic. La idea es que la carta se voltee cada 5 segundos sin hacer clic. ¿Hay alguna manera en la que la función de clic se pueda intercambiar con un temporizador/bucle sin afectar toda la función o estructura?
var card = document.querySelector('.card'); card.addEventListener( 'click', function() { card.classList.toggle('is-flipped'); }); .scene { width: 200px; height: 260px; border: 1px solid #CCC; margin: 40px 0; perspective: 600px; } .card { width: 100%; height: 100%; transition: transform 1s; transform-style: preserve-3d; cursor: pointer; position: relative; } .card.is-flipped { transform: rotateY(180deg); } .card__face { position: absolute; width: 100%; height: 100%; line-height: 260px; color: white; text-align: center; font-weight: bold; font-size: 20px; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .card__face--front { background: green; } .card__face--back { background: gray; transform: rotateY(180deg); } <div class="scene scene--card"> <div class="card"> <div class="card__face card__face--front">some text on the front</div> <div class="card__face card__face--back">some text on the back</div> </div> </div> <p>Click card to flip.</p>
setTimeout(function, milliseconds)
Ejecuta una función, después de esperar un número específico de milisegundos.
setInterval(function, milliseconds)
Igual que setTimeout(), pero repite la ejecución de la función continuamente.
var card = document.querySelector('.card'); var intervalId = window.setInterval(function(){ card.classList.toggle('is-flipped'); }, 5000); .scene { width: 200px; height: 260px; border: 1px solid #CCC; margin: 40px 0; perspective: 600px; } .card { width: 100%; height: 100%; transition: transform 1s; transform-style: preserve-3d; cursor: pointer; position: relative; } .card.is-flipped { transform: rotateY(180deg); } .card__face { position: absolute; width: 100%; height: 100%; line-height: 260px; color: white; text-align: center; font-weight: bold; font-size: 40px; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .card__face--front { background: green; } .card__face--back { background: gray; transform: rotateY(180deg); } <div class="scene scene--card"> <div class="card"> <div class="card__face card__face--front">front</div> <div class="card__face card__face--back">back</div> </div> </div> <p>Click card to flip.</p>