JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css">
<!-- The dynamic image used is 400 width and 200 height and is set in the CSS. -->
<div id="rotateDiv"></div>

<br /><br /><br /><br /><br /><br /><br />

<!-- Provide visual indication of rotated Top and Left positons -->
<div id="positionDataTop">&nbsp;&nbsp;Top: </div>
<div id="positionDataLeft">&nbsp;&nbsp;Left: </div>
<div id="showAngle">&nbsp;&nbsp;Deg: 22 </div>

<!-- For demo only - Manual Rotatation Helper -->
<div class="demo">
  <div id="slider"></div>
</div>

CSS

#rotateDiv{
  background:url("http://lorempixel.com/400/200/sports") no-repeat 0 0;
  width: 400px;
  height: 200px;
  margin-top: 100px;
  margin-left: 100px;
  
  /* If the angle is set to 0deg, then you will see the above top/left values */  
  -webkit-transform: rotate(22deg); 
     -moz-transform: rotate(22deg); 
      -ms-transform: rotate(22deg); 
       -o-transform: rotate(22deg); 
          transform: rotate(22deg);
}


/* Style for jQuery UI slider only */
.demo{
  position: relative;
  margin-left: 25px;
  margin-top: 10px;
  width: 500px;
}

#demo-frame > div.demo { 
  padding: 10px !important;
};

JavaScript

$(document).ready(function() {

    // The function: Return an object with full width/height (including borders), top/bottom coordinates.
    var getPositionData = function(el) {
        return $.extend({
            width: el.outerWidth(false),
            height: el.outerHeight(false)
        }, el.offset());
    };

    // Dynamic slider with updates
    $("#slider").slider({

        min: 0.00,
        max: 360.00,
        value: 22.00,
        slide: function(event, ui) {

            var rotateCSS = "rotate(" + ui.value + "deg)";

            $('#rotateDiv').css({
                '-moz-transform': rotateCSS,
                '-webkit-transform': rotateCSS,
                '-ms-transform': rotateCSS,
                '-o-transform': rotateCSS
            });

            // Save all the value of  width, height, top, and left for this variable.
            var savedPositionData = getPositionData($('#rotateDiv'));

            // Extract the values for Top and Left
            var positionTop = savedPositionData.top;
            var positionLeft = savedPositionData.left;

            //Show in webpage the extracted values.
            $('#positionDataTop').html('&nbsp;&nbsp;Top: ' + positionTop + "px");
            $('#positionDataLeft').html('&nbsp;&nbsp;Left: ' + positionLeft + "px");

            $('#showAngle').html('&nbsp;&nbsp;Deg: ' + ui.value);

        }

    });


    // The following below is done on page load to create a starting static reference.
    // Save all the value of  width, height, top, and left for this variable.
    var savedPositionData = getPositionData($('#rotateDiv'));

    // Extract the values for Top and Left
    var positionTop = savedPositionData.top;
    var positionLeft = savedPositionData.left;

    //Show in webpage the extracted values.
    $('#positionDataTop').html('&nbsp;&nbsp;Top: ' + positionTop + "px");
    $('#positionDataLeft').html('&nbsp;&nbsp;Left: ' + positionLeft + "px");


});