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 $controls = $("#thing > a[data-deg]"),
        $img = $("#thing > img"),
        currentDeg = 0;
    $controls.on("click", function(e) {
        e.preventDefault();
        currentDeg += parseInt($(this).data("deg"));
        //console.log(currentDeg);
        $img.css({
            "-webkit-transform": "rotate(" + currentDeg + "deg)",
            "-moz-transform": "rotate(" + currentDeg + "deg)",
            "-ms-transform": "rotate(" + currentDeg + "deg)",
            "-o-transform": "rotate(" + currentDeg + "deg)",
            "transform": "rotate(" + currentDeg + "deg)"
        });
    })
})