Press "Enter" to skip to content

Create Smooth Rotatable Elements with jQuery | UI Rotatable

jquery-UI-rotatable is a jQuery UI plugin that works in a similar way to Draggable and Resizable, without being fully-featured. By default, it places a small spin icon at the bottom left of any item that you want to make rotatable.

How to make use of it:

1. Import the jQuery UI Rotatable’s JavaScript and Stylesheet into your doc.

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/flick/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="jquery.ui.rotatable.js"></script>
<link rel="stylesheet" href="jquery.ui.rotatable.css">

2. Enable the ‘Rotatable’ functionality in your component.

<div id="target">
  Element to Rotate
</div>
$('#target').rotatable();

3. All attainable parameters to customize the ‘Rotatable’ functionality.

$('#target').rotatable({

  // specify an angle in radians (for backward compatability)
  angle: false,       

  // specify angle in degrees
  degrees: false,     

  // an image to use for a handle
  handle: false,      

   // where the handle should appear
  handleOffset: {    
    top: 0,
    left: 0
  },

  // specify angle in radians
  radians: false,           

  // offset the center of the element for rotation
  rotationCenterOffset: {   
    top: 0,
    left: 0
  },

  // should the element snap to a certain rotation?
  snap: false,              

  // angle in degrees that the rotation should be snapped to
  step: 22.5,                  

  // other transforms to performed on the element
  transforms: null,   

  // should the element rotate when the mousewheel is rotated?
  wheelRotate: true,   

  // a callback for during rotation
  rotate: function(event, ui) {
  },  

  // callback when rotation starts
  start: function(event, ui) {
  },  

  // callback when rotation stops
  stop: function(event, ui) {
  },  

});

4. Enable & Disable the rotation.

// disable
$('#target').rotatable('disable');

// re-init
$('#target').rotatable('enable');

Create Rotatable Elements, jquery ui rotatable Plugin/Github

Create-Smooth-Rotatable-Images-Demo


See Demo And Download

Official Website(godswearhats): Click Here

This superior jQuery/javascript plugin is developed by godswearhats. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *