How to trigger a flip effect

Question

I have the following code to create a flip image where I want the image to show a flip effect when user click it.

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'>

I try to use keyframe to do that. However, there are two problems with my code:

The text will flip as the element flips.

I am unable to click the img again to flip back since I make the img tag to become display:none.

Could anyone tell me how could I solve the problem or provide me a better solution to trigger a flip effect?

Thanks for any responds!

Answer 1

You should use opacity instead of display.

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.opacity = '0'
  }else{
  img.style.opacity = '100'
  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;
z-index: 2;
}
.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'>