JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/ui-lightness/jquery-ui.css">
   <div id="slider"><div id="draggable">
    <img src="http://static.arstechnica.net/assets/2010/11/feat-2001-kinect-sq-thumb-280x280-17616-f.jpg" alt="" />
 </div>
</div>

CSS

#draggable {
    width: 280px;
    padding: 18px;
    border: 1px solid #ccc;
    
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    
    -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
}

#draggable img {
    margin-bottom: 10px;
}

JavaScript

var drag = $('#draggable').draggable({
//    cancel: '#slider'
});

$('#slider').slider({
    slide: function(event, ui){
        var rotateVal = 'rotate(' + ui.value + 'deg)';
        drag.css({
            '-moz-transform': rotateVal, 
            '-webkit-transform': rotateVal
        });
    }, 
    max: 360
});