A jQuery UI Interaction which rotates any element by using CSS transform rotate(). Inspired by jQuery UI Resizable and Aidan Rogers's (godswearhats) jquery-ui-rotatable

• Supports CSS 2D transforms (only 2D)
• Rotation by mouse wheel
• Rotation with/without handle
• Compatible with other jQuery UI widgets and interactions included Draggable and Resizable
• Compatible with Dave Furfero's jQuery UI Touch Punch
• All angles in degrees
• "alsoRotate" extension (under construction)
• "animate" extension (under construction)

• jQuery UI v1.9.2 Core
• jQuery UI v1.9.2 Core - Widget
• jQuery UI v1.9.2 Core - Mouse

.

{
 disabled: false,
 angle: 0,
 handle: true,
 handleElementSelector: '<div></div>',
 rotationOriginPosition: {
 top: null,
 left: null
 },
 snap: false,
 snapStep: 22.5,
 rotate: function (event, ui) {}, // callback while rotating
 start: function (event, ui) {}, // callback when rotation starts
 stop: function (event, ui) {}, // callback when rotation stops
 wheel: true,
 wheelStep: 7.5
}

.ui-rotatable {}
.ui-rotatable-rotating {}
.ui-rotatable-handle {}

$('#foo .bar').rotatable();

$('#foo .bar').resizable().rotatable().draggable();

$('#foo .bar').rotatable({ angle: 30 });

(coming soon)

Thanks to jQuery UI Development Team (https://jqueryui.com/about/)

Thanks to Aidan Rogers (https://github.com/godswearhats/jquery-ui-rotatable)

Released under the MIT license, like jQuery

Abdullah Pazarbasi http://www.abdullahpazarbasi.com