JSFiddle - React, Tailwind, and code Playground

Animate Rotate with CSS3 + Jquery with HTML5 control slider

by Andrew Pougher

HTML

<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/cupertino/jquery-ui.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
<input type="range" min="0" max="360" value="0" id="slider" step="1" oninput="outputUpdate(value)">
<input type="text" id="rota" value="" readonly>
<hr>
<div class="panel panel-body iconsets">
  <div dragicon class="badge icon topme" style="background-image:url('https://media000.flaticon.com/img/colorwheel.png');background-repeat: no-repeat;background-position:center center;background-size: cover">
</div>
  <div dragicon class="badge icon topme" style="background-image:url('https://media000.flaticon.com/img/flaticon-logo.svg');background-repeat: no-repeat;background-position:center center;background-size: cover">
</div>
 

<!---- /// -->
</div>
<div id="bx" draggable style="background-color:#c1f3ff;display:inline-block;" class="topme">
  <span id="img_rnd" style="display:inline-block;border:1px solid darkblue;background-image: url('https://placehold.it/1200/transparent/&text=ANDREW');background-size:100% auto;min-width:100%;min-height:100%;background-repeat:no-repeat"></span>
</div>

<div id="artboard">

</div>

CSS

body {
  background: #ececec
}
.icon{  min-width: 50px;
  min-height: 50px;display:inline-block}
  
  .iconsets{max-height: 80px;}
#bx {
  width: 100px;
  height: 100px;
  min-width: 100px;
  min-height: 100px;
  position: absolute;
  top: 100px;
  left: 100px;
  border-spacing: 0;
  background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
  overflow: hidden;
}

.ui-resizable-handle {
  position: absolute;
  border: 1px solid black;
  background-color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px
}

.ui-rotatable-handle {
  position: absolute;
  border: 1px solid black;
  background-color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  margin-left: 45%;
  margin-top: -5%
}

#artboard {
  min-height: 50vh
}

JavaScript

var app = angular.module("rtApp", []);
app.controller('mainAPP', function($scope) {


});
/*----------------------------------------------------------
  // Make draggable + resize
------------------------------------------------------------*/
app.directive('draggable', function() {
  return {
    // A = attribute, E = Element, C = Class and M = HTML Comment
    restrict: 'A',
    scope: {
      dragOptions: '=draggable'
    },
    //The link function is responsible for registering DOM listeners as well as updating the DOM.
    link: function(scope, element, attrs) {
      //$(element).draggable(scope.dragOptions);
      $(element).draggable({
        containment: "#artboard",
        cursor: "move",
        stack: ".topme", // z-index at last! 
        opacity: 0.3,
        scroll: false,
        axis: "xy"
      }).resizable({
        aspectRatio: true,
        autoHide: true,
        handles: "ne, nw, se,sw"
      });
    }
  };
});

app.directive('dragicon', function() {
  return {
    // A = attribute, E = Element, C = Class and M = HTML Comment
    restrict: 'A',
    scope: {
      dragOptions: '=dragicon'
    },
    link: function(scope, element, attrs) {
      //$(element).draggable(scope.dragOptions);
      $(element).draggable({
    helper: 'clone',
    cursor: "move",
    stack: ".topme", // z-index at last! 
    axis: "xy"
  });
    }
  };
});

function outputUpdate(val) {
  document.querySelector('#rota').value = val;
  $('#bx').css({
    '-webkit-transform': 'rotate(' + val + 'deg)',
    '-moz-transform': 'rotate(' + val + 'deg)',
    'transform': 'rotate(' + val + 'deg)'
  });
}

$(function() {
/*
  $(".icon").draggable({
    helper: 'clone',
    cursor: "move",
    stack: ".topme", // z-index at last! 
    axis: "xy"
  });
*/
  $("#artboard").droppable({
    accept: ".icon",
    drop: function(event, ui) {
      var new_signature = $(ui.helper).clone().removeClass('icon badge');//.addClass('btn-danger');
      new_signature.draggable({
       ...