.thecard:hover {transformar: rotarY (180 grados)}
Quiero realizar esta transformación cuando el usuario haga clic en la tarjeta. Quiero saber cómo hacer un botón de JavaScript que pueda realizar esta función cuando el usuario haga clic en una tarjeta.
puede hacer uso de la API de Javascript element.animate() para agregar sus animaciones de fotogramas clave y configurar cómo desea que funcionen. Aconsejaría usar un sitio como caniuse para ver qué navegadores son compatibles con la API.
let animation = document.getElementById("card") //If you just want to click on the card to flip it animation.addEventListener("click", turnCard) function turnCard (){ animation.animate([ // keyframes { transform: 'perspective(400px) rotateY(0)' }, { transform: 'perspective(400px) rotateY(180deg)' } ], { // timing options duration: 1000, iterations: 1 }) } //Using a button to flip the card const cardFlipper = () =>{ animation.animate([ { transform: 'perspective(400px) rotateY(0)' }, { transform: 'perspective(400px) rotateY(180deg)' } ], { duration: 1000, iterations: 1 }) } #card{ height: 400px; background-color: blue; width: 200px; } <div id="card"> </div> <button onclick="cardFlipper()">Flip Card</button>