.thecard:hover { transform: rotateY(180deg) }
I want to perform this transform when the user will click on the card. I want to know how to make a javascript button that can perform this function when the user will click on a card.
you can make use of the the Javascript API element.animate() to add your keyframe animations and set how you want them to work. I would advise using a site like caniuseto see what browsers are compatible with the 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>