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="">
<script src="" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script src=""></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

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


  // 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

// re-init

Create Rotatable Elements, jquery ui rotatable Plugin/Github


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 *