Looking for a way to create a flip image effect when clicked by the user. Here is the code I have so far:
let img = document.querySelector('img')
let div;
let click = 0;
img.onclick=function(){
console.log(click)
if(click %2 ==0){
div = document.createElement('div')
document.body.appendChild(div);
div.className = 'flip'
div.textContent= 'Wikipedia'
img.style.display = 'none'
}else{
img.style.display = 'revert'
div.remove()
}
click++
}@keyframes fliping{
from{
transform: rotateY(0deg);
}to{
transform: rotateY(180deg);
}
}
img{
width:100px;
height:70px;
position:absolute;
top:20px;
left:20px;
text-align:center;
line-height:70px;
}
.flip{
position:absolute;
top:20px;
left:20px;
width:100px;
height:70px;
background:grey;
animation-name: fliping;
animation-duration: 1s;
}<img src='https://blogs.stthomas.edu/english/files/2016/04/Wikipedia-Logo.jpg'>The current issue with my code is that the text flips along with the element. Additionally, once the image is hidden, I am unable to trigger the flip effect again.
If you have any suggestions on how to improve this or provide a better solution, please let me know!
Thank you for your help!