jquery - 浏览器中的用户可旋转元素

Question

我正在创建一些需要最终用户使用鼠标移动对象、更改其大小并旋转对象的东西。其中大部分可以使用 JqueryUI （此处）之类的东西来实现，除了旋转。我需要用户能够旋转对象。

一种选择是放置一个调整 CSS 变换属性的滑块，但如果有办法以更直观的方式执行此操作（例如 powerpoint/photoshop），那就太好了。

有没有办法做到这一点？

Answer 1

http://jsfiddle.net/avPf6/1/是另一种使用可拖动手柄的解决方案。

// Your original element
var ele = $('#selector');

$('#selector').draggable({});

// Create handle dynamically
$('<div></div>').appendTo(ele).attr('id','handle').css({
'position': 'absolute',
'bottom': 5,
'right': 5,
'height': 10,
'width': 10,
'background-color': 'orange'
});

ele.css('position', 'relative');

$('#handle').draggable({
handle: '#handle',
opacity: 0.01, 
helper: 'clone',
drag: function(event, ui){
    var rotateCSS = 'rotate(' + ui.position.left + 'deg)';

    $(this).parent().css({
        '-moz-transform': rotateCSS,
        '-webkit-transform': rotateCSS
    });
}
});

Answer 2

像这样的东西？http://jsfiddle.net/38ZsD/

它是 JS 和 CSS 的混合体，可以做你想做的事。

$('.rotate').click(function() {
$(this).toggleClass('rotated');

});

并使用 CSS 中的变换类