Flip Image

by trentHarlem

HTML

<div id="image-container">

</div>
<button id="flip" type="button">FLIP</button>

CSS

#image-container {
  background-image: url("https://i.picsum.photos/id/738/200/200.jpg?hmac=s1pXxIw4TdDLyUY2RRVeDyhLPUF2xW3AFjdzjVsE6zc");
  height: 200px;
  width: 200px;
  background-size: contain;
}

JavaScript

let flip = 0;     
  document.getElementById("flip").addEventListener("click", function() {
      console.log('flip');
      flip -= 180;
    flip = flip % 360;
    flipper = `rotateY(${flip}deg)`;
    console.log(flipper);
    // document.getElementById("image-container").style.webkitTransform = `rotateY(${flip}deg)`;
    document.getElementById("image-container").style.webkitTransform = flipper;

  });