JSFiddle - React, Tailwind, and code Playground

by moob

HTML

<div id="thing">
  <a href="#" data-deg="-90">&larr;</a>
  <img src="http://placekitten.com/200/200" alt="meow" />
  <a href="#" data-deg="+90">&rarr;</a>
</div>

CSS

#thing img {
  -webkit-transition: all 0.5s cubic-bezier(0.32, -0.18, 0.12, 2.38);
  -moz-transition: all 0.5s cubic-bezier(0.32, -0.18, 0.12, 2.38);
  -o-transition: all 0.5s cubic-bezier(0.32, -0.18, 0.12, 2.38);
  transition: all 0.5s cubic-bezier(0.32, -0.18, 0.12, 2.38);
}

JavaScript

(function() {
  var i = 0,
    r = 0,
    d = 0,
    img = document.querySelector("#thing > img"),
    controls = document.querySelectorAll("a[data-deg]"),
    clicked = function(e) {
      e.preventDefault();
      d = this.getAttribute("data-deg");
      r += parseInt(d);
      console.log(r);
      img.style.webkitTransform = 'rotate(' + r + 'deg)';
      img.style.mozTransform = 'rotate(' + r + 'deg)';
      img.style.msTransform = 'rotate(' + r + 'deg)';
      img.style.oTransform = 'rotate(' + r + 'deg)';
      img.style.transform = 'rotate(' + r + 'deg)';
    }
  for (i = 0; i < controls.length; ++i) {
    controls[i].onclick = clicked;
  }
})()