JSFiddle - React, Tailwind, and code Playground

by blueberrymuffin

HTML

<div id="content">
<div id="htmlImage"></div>
</div>

<button id="click">Test</button>

CSS

#htmlImage 
{
  width: 3px;
  height: 100px;
//  border:1px solid black;
  background-image: url(http://i571.photobucket.com/albums/ss154/mdreiff/line-3-100_1.gif);
}

JavaScript

//var rotation = 0;
$('#click').click(function() {
   
  var insertedImage = $('#htmlImage').clone();
//  var resized = insertedImage.resizable();
 var dragged = insertedImage.draggable();
  $(this).data( "deg", 0 );
    
   var clicked = insertedImage.click(function() {
       
   alert ($(this).data( "deg" ));
       $(this).data( "deg", $(this ).data( "deg" )+5 );
      // alert ($(this));
          rotation += 5;
       $(this).rotate(rotation);
   
  });
           
  insertedImage.appendTo($('#content'));    
    });

jQuery.fn.rotate = function(degrees) {
   
    $(this).css({'-webkit-transform' : 'rotate('+ degrees +'deg)',
                 '-moz-transform' : 'rotate('+ degrees +'deg)',
                 '-ms-transform' : 'rotate('+ degrees +'deg)',
                 'transform' : 'rotate('+ degrees +'deg)'});
};


/*
$.fn.rotate=function(options) {
  var $this=$(this), prefixes, opts, wait4css=0;
  prefixes=['-Webkit-', '-Moz-', '-O-', '-ms-', ''];
  opts=$.extend({
    startDeg: false,
    endDeg: 360,
    duration: 1,
    count: 1,
    easing: 'linear',
    animate: {},
    forceJS: false
  }, options);

  function supports(prop) {
    var can=false, style=document.createElement('div').style;
    $.each(prefixes, function(i, prefix) {
      if (style[prefix.replace(/\-/g, '')+prop]==='') {
        can=true;
      }
    });
    return can;
  }

  function prefixed(prop, value) {
    var css={};
    if (!supports.transform) {
      return css;
    }
    $.each(prefixes, function(i, prefix) {
      css[prefix.toLowerCase()+prop]=value || '';
    });
    return css;
  }

  function generateFilter(deg) {
    var rot, cos, sin, matrix;
    if (supports.transform) {
      return '';
    }
    rot=deg>=0 ? Math.PI*deg/180 : Math.PI*(360+deg)/180;
    cos=Math.cos(rot);
    sin=Math.sin(rot);
    matrix='M11='+cos+',M12='+(-sin)+',M21='+sin+',M22='+cos+',SizingMethod="auto expand"';
    return 'progid:DXImageTransform.Microsoft.Matrix('+matrix+')';
  }

 ...