基于jquery ui的手动旋转元素插件

<link href="jquery.ui.rotatable.css" rel="stylesheet" type="text/css" />

<script src="jquery.min.js"></script>

<script src="jquery-ui.min.js"></script>

<script src="jquery.ui.rotatable.js"></script>

<div id="target" >旋转我</div>

$(document).ready(function() {

    var params = {

        // Callback fired on rotation start.

        start: function(event, ui) {

        },

        // Callback fired during rotation.

        rotate: function(event, ui) {

        },

        // Callback fired on rotation end.

        stop: function(event, ui) {

        },

        // Set the rotation center

        rotationCenterOffset: {

            top: 20,

            left: 20

        },

        transforms: {

            translate: '(50%, 50%)',

            scale: '(2)'

            //any other transforms

        }

    };

    $('#target').rotatable(params);

});

    angle：元素的开始角度。

    degrees：旋转的度数。

    handle：旋转的手柄的图片的url地址。

    handleOffset：手柄的位置，{top: 0, left: 0}。

    radians：使用radians作为旋转的度数。

    rotationCenterOffset：旋转的中心点位置，{top: 0, left: 0}。

    snap：是否启用step步长。

    step：按住shift键时，按指定的步长来旋转，默认为22.5度。

    start：回调函数。

    stop：回调函数。

    rotate：回调函数。

    transforms：在旋转元素上添加的CSS transforms。

    wheelRotate：是否允许鼠标滚轮进行旋转。