Некорректно работающее css свойство backface-visibility

var front = new Image(); 
front.src = "https://pp.userapi.com/c834303/v834303976/74ac8/iHI_OdnNwCc.jpg"; 
front.width = 200; 
front.height = 340; 
var deg = 180; 
document.querySelector("#card").appendChild(front); 
document.querySelector("#card").addEventListener("click", function() { 
  document.querySelector("#card").style.transform = `rotateY(${deg}deg)`; 
  deg += 180; 
});

#card { 
  position: absolute; 
  width: 200px; 
  height: 340px; 
  border: 5px solid red; 
  left: calc(50% - 100px); 
  top: calc(50% - 170px); 
  perspective: 200px; 
  transform-style: preserve-3d; 
  transition: 3s; 
} 
 
#front { 
  position: absolute; 
  backface-visibility: hidden; 
  width: 100%; 
  height: 100%; 
} 
 
#back { 
  position: absolute; 
  transform: rotateY(180deg); 
  backface-visibility: hidden; 
  background-color: green; 
  width: 100%; 
  height: 100%; 
}

<div id="card"> 
  <div id="back"></div> 
  <div id="front"></div> 
</div>