Create Rotatable Elements - jQuery UI Rotatable

File Size: 14.8 KB
Views Total: 9294
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Create Rotatable Elements - jQuery UI Rotatable

The jQuery UI Rotatable library adds the missing Rotatable functionality to jQuery UI.

The library enables a DOM element to be rotatable with a handle and works perfectly with jQuery UI's resizable and draggable functions.

More features:

  • Rotation with mouse wheel.
  • Rotation with custom handle.
  • Snaps rotatable element to a certain rotation.
  • Custom step.
  • Allows to specify an angle in degrees/radian.
  • Callback functions.

See also:

How to use it:

1. Import the jQuery UI Rotatable's JavaScript and Stylesheet into your document. Make sure you first have jQuery and jQuery UI loaded.

<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 on your element.

<div id="target">
  Element to Rotate

3. All possible 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



  • Normalize degrees to have values between 0 and 360


  • Prevent default in mouse wheel listener

This awesome jQuery plugin is developed by godswearhats. For more Advanced Usages, please check the demo page or visit the official website.