Rotate Image

by trentHarlem

HTML

<div id="image-container">

</div>
<button id="rotate" type="button">Rotate</button>

CSS

#image-container {
  background-image: url('https://i.picsum.photos/id/265/200/200.jpg?hmac=P7yvEv5EqJI1dcUPqsVzIJNv895xWbefJGQnINGcdvM');
  height: 200px;
  width: 200px;
  
}

JavaScript

let degrees = 0;
  document.getElementById("rotate").addEventListener("click", function() {
    console.log('click');
    console.log(degrees);
    //rotate counter-clockwise
  degrees -= 90;
    //rotate clockwise
  //degrees += 90;
  degrees = degrees % 360;
  deg = `rotate("${degrees}"deg)`;
  console.log(deg);
  document.getElementById("image-container").style.webkitTransform = `rotate(${degrees}deg)`
});