Rotate an image with JavaScript

by shraddhapaghdar

HTML

<input id="button" type="button" value="Rotate">
<div id="container">
    <img src="https://images.pexels.com/photos/3876407/pexels-photo-3876407.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=150&w=240" id="image">
<div>

CSS

#container.rotate90,
#container.rotate180,
#container.rotate270 {
  width: 100px;
  height: 120px
}
#image {
  transform-origin: top left;
  -webkit-transform-origin: top left;
}
#container.rotate90 #image {
  transform: rotate(90deg) translateY(-100%);
  -webkit-transform: rotate(90deg) translateY(-100%);
}
#container.rotate180 #image {
  transform: rotate(180deg) translateY(-100%);
  -webkit-transform: rotate(180deg) translateY(-100%);
}
#container.rotate270 #image {
  transform: rotate(270deg) translateY(-100%);
  -webkit-transform: rotate(270deg) translateY(-100%);
}

JavaScript

let angle = 0,
img = document.getElementById('container');
document.getElementById('button').onclick = function() {
  angle = (angle + 90) % 360;
  img.className = "rotate" + angle;
}